Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

moo-color

Package Overview
Dependencies
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

moo-color - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

docs/formatter.md
docs/modifier.md
docs/README.md
docs/setter.md
docs/state-access.md
test/index.html

5

.vscode/settings.json
{
"markdownlint.config": {
"MD001": false,
"MD009": false,
"MD024": false,
},
"cSpell.words": [

@@ -3,0 +8,0 @@ "cmyk",

17

CHANGELOG.md

@@ -10,2 +10,16 @@ # Changelog

## [0.1.1] - 2018-03-02
### Added
- Add methods for manipulate. `complement()` and `invert()`. #2
- Add method `random()`. #5
- Write [docs](https://github.com/archco/moo-color/tree/master/docs#moocolor-api). #4
### Changed
- Improve formatter. #3
- `toHex()`: Change argument `enableShort: boolean` to `mode: 'full'|'short'|'name'`.
- `toRgb()`: add `mode: 'default'|'percent'` argument.
## [0.1.0]

@@ -15,3 +29,4 @@

[Unreleased]: https://github.com/archco/moo-color/compare/v0.1.0...HEAD
[Unreleased]: https://github.com/archco/moo-color/compare/v0.1.1...HEAD
[0.1.1]: https://github.com/archco/moo-color/compare/v0.1.0...v0.1.1
[0.1.0]: https://github.com/archco/moo-color/compare/a4dfebd...v0.1.0

538

dist/moo-color.js

@@ -73,3 +73,3 @@ (function webpackUniversalModuleDefinition(root, factory) {

/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 2);
/******/ return __webpack_require__(__webpack_require__.s = 3);
/******/ })

@@ -82,8 +82,10 @@ /************************************************************************/

"use strict";
/* harmony export (immutable) */ __webpack_exports__["d"] = padStart;
/* harmony export (immutable) */ __webpack_exports__["f"] = padStart;
/* unused harmony export padEnd */
/* harmony export (immutable) */ __webpack_exports__["a"] = clamp;
/* harmony export (immutable) */ __webpack_exports__["c"] = degree;
/* harmony export (immutable) */ __webpack_exports__["e"] = resolveAlpha;
/* harmony export (immutable) */ __webpack_exports__["b"] = decimal;
/* harmony export (immutable) */ __webpack_exports__["b"] = clamp;
/* harmony export (immutable) */ __webpack_exports__["d"] = degree;
/* harmony export (immutable) */ __webpack_exports__["g"] = resolveAlpha;
/* harmony export (immutable) */ __webpack_exports__["c"] = decimal;
/* harmony export (immutable) */ __webpack_exports__["e"] = getRandom;
/* harmony export (immutable) */ __webpack_exports__["a"] = arrayIsEqual;
function padStart(str, length, chars) {

@@ -107,8 +109,8 @@ var space = length - str.length;

function degree(num) {
return ((parseFloat(num.toString()) % 360) + 360) % 360;
num = typeof num === 'string' ? parseFloat(num) : num;
return (num % 360 + 360) % 360;
}
function resolveAlpha(a) {
a = typeof a === 'number' ? a.toString() : a;
var num = parseFloat(a);
return clamp(isNaN(num) ? 1 : num, 0, 1);
a = typeof a === 'string' ? parseFloat(a) : a;
return clamp(isNaN(a) ? 1 : a, 0, 1);
}

@@ -120,2 +122,13 @@ // @see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round

}
function getRandom(min, max, precision) {
if (precision === void 0) { precision = 0; }
var num = Math.random() * (max - min) + min;
return decimal(num, precision);
}
// https://stackoverflow.com/questions/7837456/how-to-compare-arrays-in-javascript#answer-19746771
function arrayIsEqual(arr1, arr2) {
return arr1.length === arr2.length && arr1.every(function (v, i) {
return Array.isArray(v) ? arrayIsEqual(v, arr2[i]) : v === arr2[i];
});
}

@@ -394,3 +407,3 @@

}
var hex = arr.map(function (x) { return Object(__WEBPACK_IMPORTED_MODULE_0__util_util__["d" /* padStart */])(x.toString(16), 2, '0'); }).join('');
var hex = arr.map(function (x) { return Object(__WEBPACK_IMPORTED_MODULE_0__util_util__["f" /* padStart */])(x.toString(16), 2, '0'); }).join('');
return enableShort ? hexToShorthand(hex) : hex;

@@ -447,6 +460,17 @@ }

"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_color_name__ = __webpack_require__(5);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_color_name___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_color_name__);
/* harmony default export */ __webpack_exports__["a"] = (__WEBPACK_IMPORTED_MODULE_0_color_name__);
/***/ }),
/* 3 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MooColor", function() { return MooColor; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__color_formatter__ = __webpack_require__(3);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__input_parser__ = __webpack_require__(4);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__color_formatter__ = __webpack_require__(4);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__input_parser__ = __webpack_require__(6);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_util__ = __webpack_require__(0);

@@ -496,3 +520,3 @@ var __extends = (this && this.__extends) || (function () {

/**
* Color brightness. 0-255 (It based RGB)
* Returns color brightness from 0 to 255. (It based RGB)
* @see https://www.w3.org/TR/AERT/#color-contrast

@@ -535,4 +559,4 @@ * @readonly

/**
* Returns luminance value of color.
* @see https://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-contrast
* Returns luminance value of the color. value from 0 to 1.
* @see https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
* @readonly

@@ -550,3 +574,3 @@ * @type {number}

* Returns contrast ratio with other color. range from 0 to 21.
* @see https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#contrast-ratiodef
* @see https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
* @param {MooColor} color

@@ -562,2 +586,3 @@ * @returns {number} 0-21

* Return true if contrast ratio >= 4.5
* @see https://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-contrast
* @param {MooColor} color

@@ -571,3 +596,3 @@ * @returns {boolean}

* Increase lightness.
* @param {number} amount 0-100
* @param {number} amount The amount from 0 to 100.
* @returns {this}

@@ -577,3 +602,3 @@ */

return this.manipulate('hsl', function (h, s, l) {
l = Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["a" /* clamp */])(l + amount, 0, 100);
l = Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["b" /* clamp */])(l + amount, 0, 100);
return [h, s, l];

@@ -584,3 +609,3 @@ });

* Decrease lightness.
* @param {number} amount 0-100
* @param {number} amount The amount from 0 to 100.
* @returns {this}

@@ -590,3 +615,3 @@ */

return this.manipulate('hsl', function (h, s, l) {
l = Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["a" /* clamp */])(l - amount, 0, 100);
l = Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["b" /* clamp */])(l - amount, 0, 100);
return [h, s, l];

@@ -597,3 +622,3 @@ });

* Increase saturation.
* @param {number} amount 0-100
* @param {number} amount The amount from 0 to 100.
* @returns {this}

@@ -603,3 +628,3 @@ */

return this.manipulate('hsl', function (h, s, l) {
s = Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["a" /* clamp */])(s + amount, 0, 100);
s = Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["b" /* clamp */])(s + amount, 0, 100);
return [h, s, l];

@@ -610,3 +635,3 @@ });

* Decrease saturation.
* @param {number} amount 0-100
* @param {number} amount The amount from 0 to 100.
* @returns {this}

@@ -616,3 +641,3 @@ */

return this.manipulate('hsl', function (h, s, l) {
s = Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["a" /* clamp */])(s - amount, 0, 100);
s = Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["b" /* clamp */])(s - amount, 0, 100);
return [h, s, l];

@@ -622,3 +647,3 @@ });

/**
* Set saturation to 0.
* Sets saturation value to 0.
* @returns {this}

@@ -631,3 +656,3 @@ */

* Modify whiteness.
* @param {number} amount -100-100
* @param {number} amount The amount from -100 to 100.
* @returns {this}

@@ -637,7 +662,7 @@ */

var _this = this;
return this.manipulate('hwb', function (h, w, b) { return _this.resolveHwb(h, Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["a" /* clamp */])(w + amount, 0, 100), b); });
return this.manipulate('hwb', function (h, w, b) { return _this.resolveHwb(h, Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["b" /* clamp */])(w + amount, 0, 100), b); });
};
/**
* Modify blackness.
* @param {number} amount -100-100
* @param {number} amount The amount from -100 to 100.
* @returns {this}

@@ -647,3 +672,3 @@ */

var _this = this;
return this.manipulate('hwb', function (h, w, b) { return _this.resolveHwb(h, w, Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["a" /* clamp */])(b + amount, 0, 100)); });
return this.manipulate('hwb', function (h, w, b) { return _this.resolveHwb(h, w, Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["b" /* clamp */])(b + amount, 0, 100)); });
};

@@ -656,9 +681,9 @@ /**

MooColor.prototype.rotate = function (d) {
return this.manipulate('hsl', function (h, s, l) { return [Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["c" /* degree */])(h + d), s, l]; });
return this.manipulate('hsl', function (h, s, l) { return [Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["d" /* degree */])(h + d), s, l]; });
};
/**
* Mix two colors.
* @param {MooColor} color the color to mixed.
* @param {number} [percent=50] percentage of color to be mixed.
* @returns {MooColor}
* @param {MooColor} color The color to mixed.
* @param {number} [percent=50] The percentage value of color to be mixed.
* @returns {MooColor} The mixed color that as a new instance of `MooColor`.
*/

@@ -671,10 +696,55 @@ MooColor.prototype.mix = function (color, percent) {

var c2 = color.getColorAs('rgb');
var val = c1.values.map(function (v, i) { return v + (c2.values[i] - v) * percent; });
var a = c1.alpha + (c2.alpha - c1.alpha) * percent;
return new MooColor().setColor({
model: 'rgb',
values: val,
alpha: a,
values: c1.values.map(function (v, i) { return v + (c2.values[i] - v) * percent; }),
alpha: c1.alpha + (c2.alpha - c1.alpha) * percent,
}).changeModel(m);
};
/**
* Sets color to the complement of a color.
*
* @returns {this}
*/
MooColor.prototype.complement = function () {
return this.manipulate('hsl', function (h, s, l) { return [Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["d" /* degree */])(h + 180), s, l]; });
};
/**
* Sets color to the inverse (negative) of a color.
*
* @param {number} [percent=100] The relative percent of the color that inverse.
* @returns {this}
*/
MooColor.prototype.invert = function (percent) {
if (percent === void 0) { percent = 100; }
percent /= 100;
var absRound = function (x) { return Math.round(Math.abs(x)); };
return this.manipulate('rgb', function (r, g, b) { return [r, g, b].map(function (x) { return absRound(255 * percent - x); }); });
};
/**
* Sets random color values as HWB color model.
*
* @param {RandomArguments} [{hue, white, black}={}]
* @returns {this}
*/
MooColor.prototype.random = function (_a) {
var _b = _a === void 0 ? {} : _a, hue = _b.hue, white = _b.white, black = _b.black;
_c = [hue, white, black].map(function (x, i) {
if (typeof x === 'number') {
return x;
}
else if (Array.isArray(x)) {
var precision = i === 0 ? 0 : 2;
return Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["e" /* getRandom */])(Math.min.apply(Math, x), Math.max.apply(Math, x), precision);
}
else {
return i === 0 ? Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["e" /* getRandom */])(0, 360) : Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["e" /* getRandom */])(0, 100, 2);
}
}), hue = _c[0], white = _c[1], black = _c[2];
return this.setColor({
model: 'hwb',
values: this.resolveHwb(Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["d" /* degree */])(hue), Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["b" /* clamp */])(white, 0, 100), Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["b" /* clamp */])(black, 0, 100)),
alpha: 1,
});
var _c;
};
MooColor.prototype.manipulate = function (asModel, callback) {

@@ -692,3 +762,3 @@ var m = this.color.model;

/***/ }),
/* 3 */
/* 4 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

@@ -699,5 +769,7 @@

/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__color_converter__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__util_util__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__color_names__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_util__ = __webpack_require__(0);
var ColorFormatter = /** @class */ (function () {

@@ -709,3 +781,3 @@ function ColorFormatter() {

ColorFormatter.prototype.setColor = function (color) {
color.alpha = Object(__WEBPACK_IMPORTED_MODULE_1__util_util__["e" /* resolveAlpha */])(color.alpha);
color.alpha = Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["g" /* resolveAlpha */])(color.alpha);
this.color = color;

@@ -765,2 +837,10 @@ return this;

};
/**
* Represents color as notation of specific color model.
*
* @param {(AcceptedModel|'hex')} [model] - Specify color model.
* If not specifying this value, then returns current color model.
* @param {...any[]} args - Arguments for the represent methods.
* @returns {string}
*/
ColorFormatter.prototype.toString = function (model) {

@@ -773,3 +853,3 @@ var args = [];

switch (model) {
case 'hex': return this.toHex(args[0]);
case 'hex': return this.toHex.apply(this, args);
case 'hwb': return this.toHwb();

@@ -779,3 +859,3 @@ case 'hsl': return this.toHsl();

case 'cmyk': return this.toCmyk();
default: return this.toRgb();
default: return this.toRgb.apply(this, args);
}

@@ -786,10 +866,28 @@ };

* @see https://www.w3.org/TR/css-color-4/#hex-notation
* @param {boolean} [enableShort] default is false.
*
* @param {HexMode} [mode='full'] 'full'|'short'|'name'
* @returns {string}
*/
ColorFormatter.prototype.toHex = function (enableShort) {
ColorFormatter.prototype.toHex = function (mode) {
if (mode === void 0) { mode = 'full'; }
var color = this.getColorAs('rgb');
var _a = color.values.map(function (x) { return Math.round(x); }), r = _a[0], g = _a[1], b = _a[2];
var a = color.alpha === 1 ? null : color.alpha;
return "#" + __WEBPACK_IMPORTED_MODULE_0__color_converter__["i" /* rgbToHex */](r, g, b, a, true);
var nameOrShort = function () {
var name = '';
for (var _i = 0, _a = Object.keys(__WEBPACK_IMPORTED_MODULE_1__color_names__["a" /* default */]); _i < _a.length; _i++) {
var key = _a[_i];
if (Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["a" /* arrayIsEqual */])(__WEBPACK_IMPORTED_MODULE_1__color_names__["a" /* default */][key], [r, g, b])) {
name = key;
break;
}
}
return a === null && name !== '' ? name : "#" + __WEBPACK_IMPORTED_MODULE_0__color_converter__["i" /* rgbToHex */](r, g, b, a, true);
};
switch (mode) {
case 'name': return nameOrShort();
case 'short': return "#" + __WEBPACK_IMPORTED_MODULE_0__color_converter__["i" /* rgbToHex */](r, g, b, a, true);
case 'full':
default: return "#" + __WEBPACK_IMPORTED_MODULE_0__color_converter__["i" /* rgbToHex */](r, g, b, a);
}
};

@@ -799,10 +897,17 @@ /**

* @see https://www.w3.org/TR/css-color-4/#rgb-functions
*
* @param {RgbMode} [mode='default'] 'default'|'percent'
* @returns {string}
*/
ColorFormatter.prototype.toRgb = function () {
ColorFormatter.prototype.toRgb = function (mode) {
if (mode === void 0) { mode = 'default'; }
var color = this.getColorAs('rgb');
var _a = color.values.map(function (x) { return Math.round(x); }), r = _a[0], g = _a[1], b = _a[2];
if (mode === 'percent') {
_b = [r, g, b].map(function (x) { return x / 255 * 100 + "%"; }), r = _b[0], g = _b[1], b = _b[2];
}
return color.alpha === 1
? "rgb(" + r + ", " + g + ", " + b + ")"
: "rgba(" + r + ", " + g + ", " + b + ", " + color.alpha + ")";
var _b;
};

@@ -816,3 +921,3 @@ /**

var color = this.getColorAs('hwb');
var _a = color.values.map(function (x) { return Object(__WEBPACK_IMPORTED_MODULE_1__util_util__["b" /* decimal */])(x, 2); }), h = _a[0], w = _a[1], b = _a[2];
var _a = color.values.map(function (x) { return Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["c" /* decimal */])(x, 2); }), h = _a[0], w = _a[1], b = _a[2];
var a = color.alpha === 1 ? '' : ", " + color.alpha;

@@ -828,3 +933,3 @@ return "hwb(" + h + ", " + w + "%, " + b + "%" + a + ")";

var color = this.getColorAs('hsl');
var _a = color.values.map(function (x) { return Object(__WEBPACK_IMPORTED_MODULE_1__util_util__["b" /* decimal */])(x, 2); }), h = _a[0], s = _a[1], l = _a[2];
var _a = color.values.map(function (x) { return Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["c" /* decimal */])(x, 2); }), h = _a[0], s = _a[1], l = _a[2];
return color.alpha === 1

@@ -840,3 +945,3 @@ ? "hsl(" + h + ", " + s + "%, " + l + "%)"

var color = this.getColorAs('hsv');
var _a = color.values.map(function (x) { return Object(__WEBPACK_IMPORTED_MODULE_1__util_util__["b" /* decimal */])(x, 2); }), h = _a[0], s = _a[1], v = _a[2];
var _a = color.values.map(function (x) { return Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["c" /* decimal */])(x, 2); }), h = _a[0], s = _a[1], v = _a[2];
return color.alpha === 1

@@ -853,3 +958,3 @@ ? "hsv(" + h + ", " + s + "%, " + v + "%)"

var color = this.getColorAs('cmyk');
var _a = color.values.map(function (x) { return Object(__WEBPACK_IMPORTED_MODULE_1__util_util__["b" /* decimal */])(x, 2); }), c = _a[0], m = _a[1], y = _a[2], k = _a[3];
var _a = color.values.map(function (x) { return Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["c" /* decimal */])(x, 2); }), c = _a[0], m = _a[1], y = _a[2], k = _a[3];
var a = color.alpha === 1 ? '' : ", " + color.alpha;

@@ -967,178 +1072,3 @@ return "cmyk(" + c + "%, " + m + "%, " + y + "%, " + k + "%" + a + ")";

/***/ }),
/* 4 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (immutable) */ __webpack_exports__["a"] = inputParser;
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__color_converter__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__color_names__ = __webpack_require__(5);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_util__ = __webpack_require__(0);
function inputParser(input) {
if (typeof input === 'string') {
if (input in __WEBPACK_IMPORTED_MODULE_1__color_names__["a" /* default */]) {
// Named colors.
return {
model: 'rgb',
values: __WEBPACK_IMPORTED_MODULE_1__color_names__["a" /* default */][input],
alpha: 1,
};
}
else if (input === 'transparent') {
// 'transparent'.
return {
model: 'rgb',
values: [0, 0, 0],
alpha: 0,
};
}
else {
// parse string.
var prefix = input.substr(0, 3).toLowerCase();
switch (prefix) {
case 'hwb': return parseHwb(input);
case 'hsl': return parseHsl(input);
case 'hsv': return parseHsv(input);
case 'cmy': return parseCmyk(input);
default: return parseRgb(input);
}
}
}
}
function parseRgb(input) {
var hex = /^#?([a-f0-9]{6})([a-f0-9]{2})?$/i;
var shortHex = /^#?([a-f0-9]{3})([a-f0-9]{1})?$/i;
var rgba = /^rgba?\s*\(\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/;
// tslint:disable-next-line:max-line-length
var percent = /^rgba?\s*\(\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/;
var match;
var hexToAlpha = function (num) { return Math.round((parseInt(num, 16) / 255) * 100) / 100; };
var val;
var a;
if (hex.test(input)) {
match = input.match(hex);
var hexPart = match[1];
var alphaPart = match[2];
val = hexPart.match(/.{2}/g).map(function (x) { return parseInt(x, 16); });
a = alphaPart ? hexToAlpha(alphaPart) : 1;
}
else if (shortHex.test(input)) {
match = input.match(shortHex);
var hexPart = match[1];
var alphaPart = match[2];
val = hexPart.match(/.{1}/g).map(function (x) { return parseInt(x + x, 16); });
a = alphaPart ? hexToAlpha(alphaPart) : 1;
}
else if (rgba.test(input)) {
match = input.match(rgba);
val = match.slice(1, 4).map(function (x) { return parseInt(x, 0); });
a = Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["e" /* resolveAlpha */])(match[4]);
}
else if (percent.test(input)) {
match = input.match(percent);
val = match.slice(1, 4).map(function (x) { return Math.round(parseFloat(x) * 2.55); });
a = Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["e" /* resolveAlpha */])(match[4]);
}
else {
return null;
}
return {
model: 'rgb',
values: val.map(function (x) { return Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["a" /* clamp */])(x, 0, 255); }),
alpha: Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["a" /* clamp */])(a, 0, 1),
};
}
function parseHsl(input) {
// tslint:disable-next-line:max-line-length
var hsl = /^hsla?\s*\(\s*([+-]?\d*[\.]?\d+)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/i;
if (hsl.test(input)) {
var match = input.match(hsl);
return {
model: 'hsl',
values: [
Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["c" /* degree */])(match[1]),
Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["a" /* clamp */])(parseFloat(match[2]), 0, 100),
Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["a" /* clamp */])(parseFloat(match[3]), 0, 100),
],
alpha: Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["e" /* resolveAlpha */])(match[4]),
};
}
else {
return null;
}
}
function parseHwb(input) {
// tslint:disable-next-line:max-line-length
var hwb = /^hwba?\s*\(\s*([+-]?\d*[\.]?\d+)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/i;
if (hwb.test(input)) {
var match = input.match(hwb);
var h = Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["c" /* degree */])(match[1]);
var w = Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["a" /* clamp */])(parseFloat(match[2]), 0, 100);
var b = Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["a" /* clamp */])(parseFloat(match[3]), 0, 100);
return {
model: 'hwb',
values: Object(__WEBPACK_IMPORTED_MODULE_0__color_converter__["g" /* resolveHwb */])(h, w, b),
alpha: Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["e" /* resolveAlpha */])(match[4]),
};
}
else {
return null;
}
}
function parseHsv(input) {
// tslint:disable-next-line:max-line-length
var hsv = /^hsva?\s*\(\s*([+-]?\d*[\.]?\d+)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/i;
if (hsv.test(input)) {
var match = input.match(hsv);
return {
model: 'hsv',
values: [
Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["c" /* degree */])(match[1]),
Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["a" /* clamp */])(parseFloat(match[2]), 0, 100),
Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["a" /* clamp */])(parseFloat(match[3]), 0, 100),
],
alpha: Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["e" /* resolveAlpha */])(match[4]),
};
}
else {
return null;
}
}
function parseCmyk(input) {
// tslint:disable-next-line:max-line-length
var cmyk = /^cmyk\s*\(\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/i;
if (cmyk.test(input)) {
var match = input.match(cmyk);
return {
model: 'cmyk',
values: [
Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["a" /* clamp */])(parseFloat(match[1]), 0, 100),
Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["a" /* clamp */])(parseFloat(match[2]), 0, 100),
Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["a" /* clamp */])(parseFloat(match[3]), 0, 100),
Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["a" /* clamp */])(parseFloat(match[4]), 0, 100),
],
alpha: Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["e" /* resolveAlpha */])(match[5]),
};
}
else {
return null;
}
}
/***/ }),
/* 5 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_color_name__ = __webpack_require__(6);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_color_name___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_color_name__);
/* harmony default export */ __webpack_exports__["a"] = (__WEBPACK_IMPORTED_MODULE_0_color_name__);
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {

@@ -1301,2 +1231,158 @@

/***/ }),
/* 6 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (immutable) */ __webpack_exports__["a"] = inputParser;
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__color_converter__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__color_names__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_util__ = __webpack_require__(0);
function inputParser(input) {
if (typeof input === 'string') {
if (input in __WEBPACK_IMPORTED_MODULE_1__color_names__["a" /* default */]) {
// Named colors.
return {
model: 'rgb',
values: __WEBPACK_IMPORTED_MODULE_1__color_names__["a" /* default */][input],
alpha: 1,
};
}
else if (input === 'transparent') {
// 'transparent'.
return {
model: 'rgb',
values: [0, 0, 0],
alpha: 0,
};
}
else {
// parse string.
var prefix = input.substr(0, 3).toLowerCase();
switch (prefix) {
case 'hwb': return parseHwb(input);
case 'hsl': return parseHsl(input);
case 'hsv': return parseHsv(input);
case 'cmy': return parseCmyk(input);
default: return parseRgb(input);
}
}
}
}
function parseRgb(input) {
var hex = /^#?([a-f0-9]{6})([a-f0-9]{2})?$/i;
var shortHex = /^#?([a-f0-9]{3})([a-f0-9]{1})?$/i;
var rgba = /^rgba?\s*\(\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/;
// tslint:disable-next-line:max-line-length
var percent = /^rgba?\s*\(\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/;
var hexToAlpha = function (num) { return Math.round((parseInt(num, 16) / 255) * 100) / 100; };
var values;
var alpha;
if (hex.test(input)) {
var _a = input.match(hex), h = _a[1], a = _a[2];
values = h.match(/.{2}/g).map(function (x) { return parseInt(x, 16); });
alpha = a ? hexToAlpha(a) : 1;
}
else if (shortHex.test(input)) {
var _b = input.match(shortHex), h = _b[1], a = _b[2];
values = h.match(/.{1}/g).map(function (x) { return parseInt(x + x, 16); });
alpha = a ? hexToAlpha(a) : 1;
}
else if (rgba.test(input)) {
var _c = input.match(rgba), r = _c[1], g = _c[2], b = _c[3], a = _c[4];
values = [r, g, b].map(function (x) { return parseInt(x, 0); });
alpha = Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["g" /* resolveAlpha */])(a);
}
else if (percent.test(input)) {
var _d = input.match(percent), r = _d[1], g = _d[2], b = _d[3], a = _d[4];
values = [r, g, b].map(function (x) { return Math.round(parseFloat(x) * 2.55); });
alpha = Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["g" /* resolveAlpha */])(a);
}
else {
return null;
}
return {
model: 'rgb',
values: values.map(function (x) { return Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["b" /* clamp */])(x, 0, 255); }),
alpha: Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["b" /* clamp */])(alpha, 0, 1),
};
}
function parseHsl(input) {
// tslint:disable-next-line:max-line-length
var hsl = /^hsla?\s*\(\s*([+-]?\d*[\.]?\d+)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/i;
if (hsl.test(input)) {
var _a = input.match(hsl), h = _a[1], s = _a[2], l = _a[3], a = _a[4];
return {
model: 'hsl',
values: [
Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["d" /* degree */])(h),
Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["b" /* clamp */])(parseFloat(s), 0, 100),
Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["b" /* clamp */])(parseFloat(l), 0, 100),
],
alpha: Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["g" /* resolveAlpha */])(a),
};
}
else {
return null;
}
}
function parseHwb(input) {
// tslint:disable-next-line:max-line-length
var hwb = /^hwba?\s*\(\s*([+-]?\d*[\.]?\d+)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/i;
if (hwb.test(input)) {
var _a = input.match(hwb), h = _a[1], w = _a[2], b = _a[3], a = _a[4];
return {
model: 'hwb',
values: Object(__WEBPACK_IMPORTED_MODULE_0__color_converter__["g" /* resolveHwb */])(Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["d" /* degree */])(h), Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["b" /* clamp */])(parseFloat(w), 0, 100), Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["b" /* clamp */])(parseFloat(b), 0, 100)),
alpha: Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["g" /* resolveAlpha */])(a),
};
}
else {
return null;
}
}
function parseHsv(input) {
// tslint:disable-next-line:max-line-length
var hsv = /^hsva?\s*\(\s*([+-]?\d*[\.]?\d+)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/i;
if (hsv.test(input)) {
var _a = input.match(hsv), h = _a[1], s = _a[2], v = _a[3], a = _a[4];
return {
model: 'hsv',
values: [
Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["d" /* degree */])(h),
Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["b" /* clamp */])(parseFloat(s), 0, 100),
Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["b" /* clamp */])(parseFloat(v), 0, 100),
],
alpha: Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["g" /* resolveAlpha */])(a),
};
}
else {
return null;
}
}
function parseCmyk(input) {
// tslint:disable-next-line:max-line-length
var cmyk = /^cmyk\s*\(\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/i;
if (cmyk.test(input)) {
var _a = input.match(cmyk), c = _a[1], m = _a[2], y = _a[3], k = _a[4], a = _a[5];
return {
model: 'cmyk',
values: [
Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["b" /* clamp */])(parseFloat(c), 0, 100),
Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["b" /* clamp */])(parseFloat(m), 0, 100),
Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["b" /* clamp */])(parseFloat(y), 0, 100),
Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["b" /* clamp */])(parseFloat(k), 0, 100),
],
alpha: Object(__WEBPACK_IMPORTED_MODULE_2__util_util__["g" /* resolveAlpha */])(a),
};
}
else {
return null;
}
}
/***/ })

@@ -1303,0 +1389,0 @@ /******/ ]);

2

dist/moo-color.min.js

@@ -1,1 +0,1 @@

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.MooColor=t():e.MooColor=t()}("undefined"!=typeof self?self:this,function(){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var a=t[n]={i:n,l:!1,exports:{}};return e[n].call(a.exports,a,a.exports,r),a.l=!0,a.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=2)}([function(e,t,r){"use strict";function n(e,t){for(;e.length<t;)e+=e;return e.length>t?e.substring(e.length-t):e}function a(e,t,r){return Math.min(Math.max(t,e),r)}t.d=function(e,t,r){var a=t-e.length;return a>0?""+n(r,a)+e:e},t.a=a,t.c=function(e){return(parseFloat(e.toString())%360+360)%360},t.e=function(e){e="number"==typeof e?e.toString():e;var t=parseFloat(e);return a(isNaN(t)?1:t,0,1)},t.b=function(e,t){var r=Math.pow(10,t);return Math.round(e*r)/r}},function(e,t,r){"use strict";t.b=function(e,t,r){e/=60,t/=100,r/=100;var n,a,o,s=(1-Math.abs(2*r-1))*t,i=s*(1-Math.abs(e%2-1)),u=r-s/2;switch(Math.floor(e)){case 0:n=s,a=i,o=0;break;case 1:n=i,a=s,o=0;break;case 2:n=0,a=s,o=i;break;case 3:n=0,a=i,o=s;break;case 4:n=i,a=0,o=s;break;case 5:n=s,a=0,o=i}return[n,a,o].map(function(e){return 255*(e+u)})},t.j=function(e,t,r){e/=255,t/=255,r/=255;var n,a,o,s=Math.max(e,t,r),i=Math.min(e,t,r),u=s-i;n=0===u?0:s===e?(t-r)/u%6*60:s===t?60*((r-e)/u+2):60*((e-t)/u+4);return o=(s+i)/2,a=0===u?0:u/(1-Math.abs(2*o-1)),[n,100*a,100*o]},t.f=function(e,t,r){var n=i(e,t,r),o=n[0],s=n[1],u=n[2];return a(o,s,u)},t.l=function(e,t,r){var n=o(e,t,r),a=n[0],i=n[1],u=n[2];return s(a,i,u)},t.a=function(e,t,r,n){return[255*(1-(e/=100))*(1-(n/=100)),255*(1-(t/=100))*(1-n),255*(1-(r/=100))*(1-n)]},t.h=function(e,t,r){e/=255,t/=255,r/=255;var n=1-Math.max(e,t,r);return[(1-e-n)/(1-n),(1-t-n)/(1-n),(1-r-n)/(1-n),n].map(function(e){return 100*e})},t.d=a,t.k=o,t.c=s,t.e=i,t.i=function(e,t,r,a,o){var s=[e,t,r];"number"==typeof a&&s.push(Math.round(255*a));var i=s.map(function(e){return Object(n.d)(e.toString(16),2,"0")}).join("");return o?function(e){var t=!0,r=e.match(/.{2}/g);return r.forEach(function(e){e.match(/(.)\1+/)||(t=!1)}),t?r.map(function(e){return e.substring(1)}).join(""):e}(i):i},t.g=u;var n=r(0);function a(e,t,r){var n,a,o,s=e/60,i=(r/=100)*(t/=100),u=i*(1-Math.abs(s%2-1)),c=r-i;switch(Math.floor(s)){case 0:n=i,a=u,o=0;break;case 1:n=u,a=i,o=0;break;case 2:n=0,a=i,o=u;break;case 3:n=0,a=u,o=i;break;case 4:n=u,a=0,o=i;break;case 5:n=i,a=0,o=u}return[n,a,o].map(function(e){return 255*(e+c)})}function o(e,t,r){e/=255,t/=255,r/=255;var n=Math.max(e,t,r),a=n-Math.min(e,t,r);return[0===a?0:n===e?(t-r)/a%6*60:n===t?60*((r-e)/a+2):60*((e-t)/a+4),100*(0===n?0:a/n),100*n]}function s(e,t,r){return[e,100*((1-(t/=100))*(r/=100)),100*(1-r)]}function i(e,t,r){var n;return e=(n=u(e,t,r))[0],t=n[1],r=n[2],[e,100*(1-(t/=100)/(1-(r/=100))),100*(1-r)]}function u(e,t,r){var n=t+r;return n>100&&(t=100*Number((t/n).toFixed(4)),r=100*Number((r/n).toFixed(4))),[e,t,r]}},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),r.d(t,"MooColor",function(){return u});var n,a=r(3),o=r(4),s=r(0),i=this&&this.__extends||(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])},function(e,t){function r(){this.constructor=e}n(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}),u=function(e){function t(t){var r=e.call(this)||this;return t=t||"#000",r.setColorByParser(t),r}return i(t,e),t.mix=function(e,r,n){void 0===n&&(n=50);var a="string"==typeof e?new t(e):e;return("string"==typeof r?new t(r):r).mix(a,n)},t.prototype.setColorByParser=function(e){var t=Object(o.a)(e);if(!t)throw new Error("parsing error!");return this.setColor(t)},t.prototype.clone=function(){return(new t).setColor(this.color)},Object.defineProperty(t.prototype,"brightness",{get:function(){var e=this.getColorAs("rgb").values;return(299*e[0]+587*e[1]+114*e[2])/1e3},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"isLight",{get:function(){return this.brightness>=128},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"isDark",{get:function(){return this.brightness<128},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"luminance",{get:function(){var e=this.getColorAs("rgb").values.map(function(e){return e/255});return.2126*e[0]+.7152*e[1]+.0722*e[2]},enumerable:!0,configurable:!0}),t.prototype.contrastRatioWith=function(e){return(Math.max(this.luminance,e.luminance)+.05)/(Math.min(this.luminance,e.luminance)+.05)},t.prototype.isContrastEnough=function(e){return this.contrastRatioWith(e)>=4.5},t.prototype.lighten=function(e){return this.manipulate("hsl",function(t,r,n){return[t,r,n=Object(s.a)(n+e,0,100)]})},t.prototype.darken=function(e){return this.manipulate("hsl",function(t,r,n){return[t,r,n=Object(s.a)(n-e,0,100)]})},t.prototype.saturate=function(e){return this.manipulate("hsl",function(t,r,n){return[t,r=Object(s.a)(r+e,0,100),n]})},t.prototype.desaturate=function(e){return this.manipulate("hsl",function(t,r,n){return[t,r=Object(s.a)(r-e,0,100),n]})},t.prototype.grayscale=function(){return this.manipulate("hsl",function(e,t,r){return[e,0,r]})},t.prototype.whiten=function(e){var t=this;return this.manipulate("hwb",function(r,n,a){return t.resolveHwb(r,Object(s.a)(n+e,0,100),a)})},t.prototype.blacken=function(e){var t=this;return this.manipulate("hwb",function(r,n,a){return t.resolveHwb(r,n,Object(s.a)(a+e,0,100))})},t.prototype.rotate=function(e){return this.manipulate("hsl",function(t,r,n){return[Object(s.c)(t+e),r,n]})},t.prototype.mix=function(e,r){void 0===r&&(r=50),r/=100;var n=this.getModel(),a=this.getColorAs("rgb"),o=e.getColorAs("rgb"),s=a.values.map(function(e,t){return e+(o.values[t]-e)*r}),i=a.alpha+(o.alpha-a.alpha)*r;return(new t).setColor({model:"rgb",values:s,alpha:i}).changeModel(n)},t.prototype.manipulate=function(e,t){var r=this.color.model,n=this.getColorAs(e);return n.values=t.apply(void 0,n.values),this.setColor(n).changeModel(r)},t}(a.a)},function(e,t,r){"use strict";r.d(t,"a",function(){return o});var n=r(1),a=r(0),o=function(){function e(){this.resolveHwb=n.g}return e.prototype.setColor=function(e){return e.alpha=Object(a.e)(e.alpha),this.color=e,this},e.prototype.getColor=function(){return this.color},e.prototype.getColorAs=function(e){return this.color.model===e?this.color:this.convert(this.color,e)},e.prototype.getModel=function(){return this.color?this.color.model:void 0},e.prototype.changeModel=function(e){return this.color.model===e?this:this.setColor(this.convert(this.color,e))},e.prototype.getAlpha=function(){return this.color.alpha},e.prototype.setAlpha=function(e){return this.color.alpha=e,this},e.prototype.convert=function(e,t){var r;switch(e.model){case"rgb":r=this.convertFromRgb(e.values,t);break;case"hwb":r=this.convertFromHwb(e.values,t);break;case"hsl":r=this.convertFromHsl(e.values,t);break;case"hsv":r=this.convertFromHsv(e.values,t);break;case"cmyk":r=this.convertFromCmyk(e.values,t)}if(!r.length)throw new Error("Converting Error!");return{model:t,values:r,alpha:e.alpha}},e.prototype.toString=function(e){for(var t=[],r=1;r<arguments.length;r++)t[r-1]=arguments[r];switch(e=e||this.color.model){case"hex":return this.toHex(t[0]);case"hwb":return this.toHwb();case"hsl":return this.toHsl();case"hsv":return this.toHsv();case"cmyk":return this.toCmyk();default:return this.toRgb()}},e.prototype.toHex=function(e){var t=this.getColorAs("rgb"),r=t.values.map(function(e){return Math.round(e)}),a=r[0],o=r[1],s=r[2],i=1===t.alpha?null:t.alpha;return"#"+n.i(a,o,s,i,!0)},e.prototype.toRgb=function(){var e=this.getColorAs("rgb"),t=e.values.map(function(e){return Math.round(e)}),r=t[0],n=t[1],a=t[2];return 1===e.alpha?"rgb("+r+", "+n+", "+a+")":"rgba("+r+", "+n+", "+a+", "+e.alpha+")"},e.prototype.toHwb=function(){var e=this.getColorAs("hwb"),t=e.values.map(function(e){return Object(a.b)(e,2)});return"hwb("+t[0]+", "+t[1]+"%, "+t[2]+"%"+(1===e.alpha?"":", "+e.alpha)+")"},e.prototype.toHsl=function(){var e=this.getColorAs("hsl"),t=e.values.map(function(e){return Object(a.b)(e,2)}),r=t[0],n=t[1],o=t[2];return 1===e.alpha?"hsl("+r+", "+n+"%, "+o+"%)":"hsla("+r+", "+n+"%, "+o+"%, "+e.alpha+")"},e.prototype.toHsv=function(){var e=this.getColorAs("hsv"),t=e.values.map(function(e){return Object(a.b)(e,2)}),r=t[0],n=t[1],o=t[2];return 1===e.alpha?"hsv("+r+", "+n+"%, "+o+"%)":"hsva("+r+", "+n+"%, "+o+"%, "+e.alpha+")"},e.prototype.toCmyk=function(){var e=this.getColorAs("cmyk"),t=e.values.map(function(e){return Object(a.b)(e,2)});return"cmyk("+t[0]+"%, "+t[1]+"%, "+t[2]+"%, "+t[3]+"%"+(1===e.alpha?"":", "+e.alpha)+")"},e.prototype.convertFromRgb=function(e,t){var r=e[0],a=e[1],o=e[2];switch(t){case"rgb":break;case"hwb":e=n.l(r,a,o);break;case"hsl":e=n.j(r,a,o);break;case"hsv":e=n.k(r,a,o);break;case"cmyk":e=n.h(r,a,o)}return e},e.prototype.convertFromHwb=function(e,t){var r=e[0],a=e[1],o=e[2],s=n.f(r,a,o),i=s[0],u=s[1],c=s[2];switch(t){case"rgb":e=s;break;case"hwb":break;case"hsl":e=n.j(i,u,c);break;case"hsv":e=n.e(r,a,o);break;case"cmyk":e=n.h(i,u,c)}return e},e.prototype.convertFromHsl=function(e,t){var r=e[0],a=e[1],o=e[2],s=n.b(r,a,o),i=s[0],u=s[1],c=s[2];switch(t){case"rgb":e=s;break;case"hwb":e=n.l(i,u,c);break;case"hsl":break;case"hsv":e=n.k(i,u,c);break;case"cmyk":e=n.h(i,u,c)}return e},e.prototype.convertFromHsv=function(e,t){var r=e[0],a=e[1],o=e[2],s=n.d(r,a,o),i=s[0],u=s[1],c=s[2];switch(t){case"rgb":e=s;break;case"hwb":e=n.c(r,a,o);break;case"hsl":e=n.j(i,u,c);break;case"hsv":break;case"cmyk":e=n.h(i,u,c)}return e},e.prototype.convertFromCmyk=function(e,t){var r=e[0],a=e[1],o=e[2],s=e[3],i=n.a(r,a,o,s),u=i[0],c=i[1],l=i[2];switch(t){case"rgb":e=i;break;case"hwb":e=n.l(u,c,l);break;case"hsl":e=n.j(u,c,l);break;case"hsv":e=n.k(u,c,l)}return e},e}()},function(e,t,r){"use strict";t.a=function(e){if("string"==typeof e){if(e in a.a)return{model:"rgb",values:a.a[e],alpha:1};if("transparent"===e)return{model:"rgb",values:[0,0,0],alpha:0};var t=e.substr(0,3).toLowerCase();switch(t){case"hwb":return function(e){var t=/^hwba?\s*\(\s*([+-]?\d*[\.]?\d+)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/i;if(t.test(e)){var r=e.match(t),a=Object(o.c)(r[1]),s=Object(o.a)(parseFloat(r[2]),0,100),i=Object(o.a)(parseFloat(r[3]),0,100);return{model:"hwb",values:Object(n.g)(a,s,i),alpha:Object(o.e)(r[4])}}return null}(e);case"hsl":return function(e){var t=/^hsla?\s*\(\s*([+-]?\d*[\.]?\d+)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/i;if(t.test(e)){var r=e.match(t);return{model:"hsl",values:[Object(o.c)(r[1]),Object(o.a)(parseFloat(r[2]),0,100),Object(o.a)(parseFloat(r[3]),0,100)],alpha:Object(o.e)(r[4])}}return null}(e);case"hsv":return function(e){var t=/^hsva?\s*\(\s*([+-]?\d*[\.]?\d+)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/i;if(t.test(e)){var r=e.match(t);return{model:"hsv",values:[Object(o.c)(r[1]),Object(o.a)(parseFloat(r[2]),0,100),Object(o.a)(parseFloat(r[3]),0,100)],alpha:Object(o.e)(r[4])}}return null}(e);case"cmy":return function(e){var t=/^cmyk\s*\(\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/i;if(t.test(e)){var r=e.match(t);return{model:"cmyk",values:[Object(o.a)(parseFloat(r[1]),0,100),Object(o.a)(parseFloat(r[2]),0,100),Object(o.a)(parseFloat(r[3]),0,100),Object(o.a)(parseFloat(r[4]),0,100)],alpha:Object(o.e)(r[5])}}return null}(e);default:return function(e){var t,r,n,a=/^#?([a-f0-9]{6})([a-f0-9]{2})?$/i,s=/^#?([a-f0-9]{3})([a-f0-9]{1})?$/i,i=/^rgba?\s*\(\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/,u=/^rgba?\s*\(\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/,c=function(e){return Math.round(parseInt(e,16)/255*100)/100};if(a.test(e)){var l=(t=e.match(a))[1],h=t[2];r=l.match(/.{2}/g).map(function(e){return parseInt(e,16)}),n=h?c(h):1}else if(s.test(e)){var l=(t=e.match(s))[1],h=t[2];r=l.match(/.{1}/g).map(function(e){return parseInt(e+e,16)}),n=h?c(h):1}else if(i.test(e))t=e.match(i),r=t.slice(1,4).map(function(e){return parseInt(e,0)}),n=Object(o.e)(t[4]);else{if(!u.test(e))return null;t=e.match(u),r=t.slice(1,4).map(function(e){return Math.round(2.55*parseFloat(e))}),n=Object(o.e)(t[4])}return{model:"rgb",values:r.map(function(e){return Object(o.a)(e,0,255)}),alpha:Object(o.a)(n,0,1)}}(e)}}};var n=r(1),a=r(5),o=r(0)},function(e,t,r){"use strict";var n=r(6);r.n(n);t.a=n},function(e,t,r){"use strict";e.exports={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]}}])});
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.MooColor=t():e.MooColor=t()}("undefined"!=typeof self?self:this,function(){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var a=t[n]={i:n,l:!1,exports:{}};return e[n].call(a.exports,a,a.exports,r),a.l=!0,a.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=3)}([function(e,t,r){"use strict";function n(e,t){for(;e.length<t;)e+=e;return e.length>t?e.substring(e.length-t):e}function a(e,t,r){return Math.min(Math.max(t,e),r)}function o(e,t){var r=Math.pow(10,t);return Math.round(e*r)/r}t.f=function(e,t,r){var a=t-e.length;return a>0?""+n(r,a)+e:e},t.b=a,t.d=function(e){return((e="string"==typeof e?parseFloat(e):e)%360+360)%360},t.g=function(e){return e="string"==typeof e?parseFloat(e):e,a(isNaN(e)?1:e,0,1)},t.c=o,t.e=function(e,t,r){void 0===r&&(r=0);return o(Math.random()*(t-e)+e,r)},t.a=function e(t,r){return t.length===r.length&&t.every(function(t,n){return Array.isArray(t)?e(t,r[n]):t===r[n]})}},function(e,t,r){"use strict";t.b=function(e,t,r){e/=60,t/=100,r/=100;var n,a,o,s=(1-Math.abs(2*r-1))*t,u=s*(1-Math.abs(e%2-1)),i=r-s/2;switch(Math.floor(e)){case 0:n=s,a=u,o=0;break;case 1:n=u,a=s,o=0;break;case 2:n=0,a=s,o=u;break;case 3:n=0,a=u,o=s;break;case 4:n=u,a=0,o=s;break;case 5:n=s,a=0,o=u}return[n,a,o].map(function(e){return 255*(e+i)})},t.j=function(e,t,r){e/=255,t/=255,r/=255;var n,a,o,s=Math.max(e,t,r),u=Math.min(e,t,r),i=s-u;n=0===i?0:s===e?(t-r)/i%6*60:s===t?60*((r-e)/i+2):60*((e-t)/i+4);return o=(s+u)/2,a=0===i?0:i/(1-Math.abs(2*o-1)),[n,100*a,100*o]},t.f=function(e,t,r){var n=u(e,t,r),o=n[0],s=n[1],i=n[2];return a(o,s,i)},t.l=function(e,t,r){var n=o(e,t,r),a=n[0],u=n[1],i=n[2];return s(a,u,i)},t.a=function(e,t,r,n){return[255*(1-(e/=100))*(1-(n/=100)),255*(1-(t/=100))*(1-n),255*(1-(r/=100))*(1-n)]},t.h=function(e,t,r){e/=255,t/=255,r/=255;var n=1-Math.max(e,t,r);return[(1-e-n)/(1-n),(1-t-n)/(1-n),(1-r-n)/(1-n),n].map(function(e){return 100*e})},t.d=a,t.k=o,t.c=s,t.e=u,t.i=function(e,t,r,a,o){var s=[e,t,r];"number"==typeof a&&s.push(Math.round(255*a));var u=s.map(function(e){return Object(n.f)(e.toString(16),2,"0")}).join("");return o?function(e){var t=!0,r=e.match(/.{2}/g);return r.forEach(function(e){e.match(/(.)\1+/)||(t=!1)}),t?r.map(function(e){return e.substring(1)}).join(""):e}(u):u},t.g=i;var n=r(0);function a(e,t,r){var n,a,o,s=e/60,u=(r/=100)*(t/=100),i=u*(1-Math.abs(s%2-1)),c=r-u;switch(Math.floor(s)){case 0:n=u,a=i,o=0;break;case 1:n=i,a=u,o=0;break;case 2:n=0,a=u,o=i;break;case 3:n=0,a=i,o=u;break;case 4:n=i,a=0,o=u;break;case 5:n=u,a=0,o=i}return[n,a,o].map(function(e){return 255*(e+c)})}function o(e,t,r){e/=255,t/=255,r/=255;var n=Math.max(e,t,r),a=n-Math.min(e,t,r);return[0===a?0:n===e?(t-r)/a%6*60:n===t?60*((r-e)/a+2):60*((e-t)/a+4),100*(0===n?0:a/n),100*n]}function s(e,t,r){return[e,100*((1-(t/=100))*(r/=100)),100*(1-r)]}function u(e,t,r){var n;return e=(n=i(e,t,r))[0],t=n[1],r=n[2],[e,100*(1-(t/=100)/(1-(r/=100))),100*(1-r)]}function i(e,t,r){var n=t+r;return n>100&&(t=100*Number((t/n).toFixed(4)),r=100*Number((r/n).toFixed(4))),[e,t,r]}},function(e,t,r){"use strict";var n=r(5);r.n(n);t.a=n},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),r.d(t,"MooColor",function(){return i});var n,a=r(4),o=r(6),s=r(0),u=this&&this.__extends||(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])},function(e,t){function r(){this.constructor=e}n(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}),i=function(e){function t(t){var r=e.call(this)||this;return t=t||"#000",r.setColorByParser(t),r}return u(t,e),t.mix=function(e,r,n){void 0===n&&(n=50);var a="string"==typeof e?new t(e):e;return("string"==typeof r?new t(r):r).mix(a,n)},t.prototype.setColorByParser=function(e){var t=Object(o.a)(e);if(!t)throw new Error("parsing error!");return this.setColor(t)},t.prototype.clone=function(){return(new t).setColor(this.color)},Object.defineProperty(t.prototype,"brightness",{get:function(){var e=this.getColorAs("rgb").values;return(299*e[0]+587*e[1]+114*e[2])/1e3},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"isLight",{get:function(){return this.brightness>=128},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"isDark",{get:function(){return this.brightness<128},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"luminance",{get:function(){var e=this.getColorAs("rgb").values.map(function(e){return e/255});return.2126*e[0]+.7152*e[1]+.0722*e[2]},enumerable:!0,configurable:!0}),t.prototype.contrastRatioWith=function(e){return(Math.max(this.luminance,e.luminance)+.05)/(Math.min(this.luminance,e.luminance)+.05)},t.prototype.isContrastEnough=function(e){return this.contrastRatioWith(e)>=4.5},t.prototype.lighten=function(e){return this.manipulate("hsl",function(t,r,n){return[t,r,n=Object(s.b)(n+e,0,100)]})},t.prototype.darken=function(e){return this.manipulate("hsl",function(t,r,n){return[t,r,n=Object(s.b)(n-e,0,100)]})},t.prototype.saturate=function(e){return this.manipulate("hsl",function(t,r,n){return[t,r=Object(s.b)(r+e,0,100),n]})},t.prototype.desaturate=function(e){return this.manipulate("hsl",function(t,r,n){return[t,r=Object(s.b)(r-e,0,100),n]})},t.prototype.grayscale=function(){return this.manipulate("hsl",function(e,t,r){return[e,0,r]})},t.prototype.whiten=function(e){var t=this;return this.manipulate("hwb",function(r,n,a){return t.resolveHwb(r,Object(s.b)(n+e,0,100),a)})},t.prototype.blacken=function(e){var t=this;return this.manipulate("hwb",function(r,n,a){return t.resolveHwb(r,n,Object(s.b)(a+e,0,100))})},t.prototype.rotate=function(e){return this.manipulate("hsl",function(t,r,n){return[Object(s.d)(t+e),r,n]})},t.prototype.mix=function(e,r){void 0===r&&(r=50),r/=100;var n=this.getModel(),a=this.getColorAs("rgb"),o=e.getColorAs("rgb");return(new t).setColor({model:"rgb",values:a.values.map(function(e,t){return e+(o.values[t]-e)*r}),alpha:a.alpha+(o.alpha-a.alpha)*r}).changeModel(n)},t.prototype.complement=function(){return this.manipulate("hsl",function(e,t,r){return[Object(s.d)(e+180),t,r]})},t.prototype.invert=function(e){void 0===e&&(e=100),e/=100;return this.manipulate("rgb",function(t,r,n){return[t,r,n].map(function(t){return function(e){return Math.round(Math.abs(e))}(255*e-t)})})},t.prototype.random=function(e){var t,r=void 0===e?{}:e,n=r.hue,a=r.white,o=r.black;return n=(t=[n,a,o].map(function(e,t){if("number"==typeof e)return e;if(Array.isArray(e)){var r=0===t?0:2;return Object(s.e)(Math.min.apply(Math,e),Math.max.apply(Math,e),r)}return 0===t?Object(s.e)(0,360):Object(s.e)(0,100,2)}))[0],a=t[1],o=t[2],this.setColor({model:"hwb",values:this.resolveHwb(Object(s.d)(n),Object(s.b)(a,0,100),Object(s.b)(o,0,100)),alpha:1})},t.prototype.manipulate=function(e,t){var r=this.color.model,n=this.getColorAs(e);return n.values=t.apply(void 0,n.values),this.setColor(n).changeModel(r)},t}(a.a)},function(e,t,r){"use strict";r.d(t,"a",function(){return s});var n=r(1),a=r(2),o=r(0),s=function(){function e(){this.resolveHwb=n.g}return e.prototype.setColor=function(e){return e.alpha=Object(o.g)(e.alpha),this.color=e,this},e.prototype.getColor=function(){return this.color},e.prototype.getColorAs=function(e){return this.color.model===e?this.color:this.convert(this.color,e)},e.prototype.getModel=function(){return this.color?this.color.model:void 0},e.prototype.changeModel=function(e){return this.color.model===e?this:this.setColor(this.convert(this.color,e))},e.prototype.getAlpha=function(){return this.color.alpha},e.prototype.setAlpha=function(e){return this.color.alpha=e,this},e.prototype.convert=function(e,t){var r;switch(e.model){case"rgb":r=this.convertFromRgb(e.values,t);break;case"hwb":r=this.convertFromHwb(e.values,t);break;case"hsl":r=this.convertFromHsl(e.values,t);break;case"hsv":r=this.convertFromHsv(e.values,t);break;case"cmyk":r=this.convertFromCmyk(e.values,t)}if(!r.length)throw new Error("Converting Error!");return{model:t,values:r,alpha:e.alpha}},e.prototype.toString=function(e){for(var t=[],r=1;r<arguments.length;r++)t[r-1]=arguments[r];switch(e=e||this.color.model){case"hex":return this.toHex.apply(this,t);case"hwb":return this.toHwb();case"hsl":return this.toHsl();case"hsv":return this.toHsv();case"cmyk":return this.toCmyk();default:return this.toRgb.apply(this,t)}},e.prototype.toHex=function(e){void 0===e&&(e="full");var t=this.getColorAs("rgb"),r=t.values.map(function(e){return Math.round(e)}),s=r[0],u=r[1],i=r[2],c=1===t.alpha?null:t.alpha;switch(e){case"name":return function(){for(var e="",t=0,r=Object.keys(a.a);t<r.length;t++){var l=r[t];if(Object(o.a)(a.a[l],[s,u,i])){e=l;break}}return null===c&&""!==e?e:"#"+n.i(s,u,i,c,!0)}();case"short":return"#"+n.i(s,u,i,c,!0);case"full":default:return"#"+n.i(s,u,i,c)}},e.prototype.toRgb=function(e){void 0===e&&(e="default");var t,r=this.getColorAs("rgb"),n=r.values.map(function(e){return Math.round(e)}),a=n[0],o=n[1],s=n[2];return"percent"===e&&(a=(t=[a,o,s].map(function(e){return e/255*100+"%"}))[0],o=t[1],s=t[2]),1===r.alpha?"rgb("+a+", "+o+", "+s+")":"rgba("+a+", "+o+", "+s+", "+r.alpha+")"},e.prototype.toHwb=function(){var e=this.getColorAs("hwb"),t=e.values.map(function(e){return Object(o.c)(e,2)});return"hwb("+t[0]+", "+t[1]+"%, "+t[2]+"%"+(1===e.alpha?"":", "+e.alpha)+")"},e.prototype.toHsl=function(){var e=this.getColorAs("hsl"),t=e.values.map(function(e){return Object(o.c)(e,2)}),r=t[0],n=t[1],a=t[2];return 1===e.alpha?"hsl("+r+", "+n+"%, "+a+"%)":"hsla("+r+", "+n+"%, "+a+"%, "+e.alpha+")"},e.prototype.toHsv=function(){var e=this.getColorAs("hsv"),t=e.values.map(function(e){return Object(o.c)(e,2)}),r=t[0],n=t[1],a=t[2];return 1===e.alpha?"hsv("+r+", "+n+"%, "+a+"%)":"hsva("+r+", "+n+"%, "+a+"%, "+e.alpha+")"},e.prototype.toCmyk=function(){var e=this.getColorAs("cmyk"),t=e.values.map(function(e){return Object(o.c)(e,2)});return"cmyk("+t[0]+"%, "+t[1]+"%, "+t[2]+"%, "+t[3]+"%"+(1===e.alpha?"":", "+e.alpha)+")"},e.prototype.convertFromRgb=function(e,t){var r=e[0],a=e[1],o=e[2];switch(t){case"rgb":break;case"hwb":e=n.l(r,a,o);break;case"hsl":e=n.j(r,a,o);break;case"hsv":e=n.k(r,a,o);break;case"cmyk":e=n.h(r,a,o)}return e},e.prototype.convertFromHwb=function(e,t){var r=e[0],a=e[1],o=e[2],s=n.f(r,a,o),u=s[0],i=s[1],c=s[2];switch(t){case"rgb":e=s;break;case"hwb":break;case"hsl":e=n.j(u,i,c);break;case"hsv":e=n.e(r,a,o);break;case"cmyk":e=n.h(u,i,c)}return e},e.prototype.convertFromHsl=function(e,t){var r=e[0],a=e[1],o=e[2],s=n.b(r,a,o),u=s[0],i=s[1],c=s[2];switch(t){case"rgb":e=s;break;case"hwb":e=n.l(u,i,c);break;case"hsl":break;case"hsv":e=n.k(u,i,c);break;case"cmyk":e=n.h(u,i,c)}return e},e.prototype.convertFromHsv=function(e,t){var r=e[0],a=e[1],o=e[2],s=n.d(r,a,o),u=s[0],i=s[1],c=s[2];switch(t){case"rgb":e=s;break;case"hwb":e=n.c(r,a,o);break;case"hsl":e=n.j(u,i,c);break;case"hsv":break;case"cmyk":e=n.h(u,i,c)}return e},e.prototype.convertFromCmyk=function(e,t){var r=e[0],a=e[1],o=e[2],s=e[3],u=n.a(r,a,o,s),i=u[0],c=u[1],l=u[2];switch(t){case"rgb":e=u;break;case"hwb":e=n.l(i,c,l);break;case"hsl":e=n.j(i,c,l);break;case"hsv":e=n.k(i,c,l)}return e},e}()},function(e,t,r){"use strict";e.exports={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]}},function(e,t,r){"use strict";t.a=function(e){if("string"==typeof e){if(e in a.a)return{model:"rgb",values:a.a[e],alpha:1};if("transparent"===e)return{model:"rgb",values:[0,0,0],alpha:0};var t=e.substr(0,3).toLowerCase();switch(t){case"hwb":return function(e){var t=/^hwba?\s*\(\s*([+-]?\d*[\.]?\d+)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/i;if(t.test(e)){var r=e.match(t),a=r[1],s=r[2],u=r[3],i=r[4];return{model:"hwb",values:Object(n.g)(Object(o.d)(a),Object(o.b)(parseFloat(s),0,100),Object(o.b)(parseFloat(u),0,100)),alpha:Object(o.g)(i)}}return null}(e);case"hsl":return function(e){var t=/^hsla?\s*\(\s*([+-]?\d*[\.]?\d+)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/i;if(t.test(e)){var r=e.match(t),n=r[1],a=r[2],s=r[3],u=r[4];return{model:"hsl",values:[Object(o.d)(n),Object(o.b)(parseFloat(a),0,100),Object(o.b)(parseFloat(s),0,100)],alpha:Object(o.g)(u)}}return null}(e);case"hsv":return function(e){var t=/^hsva?\s*\(\s*([+-]?\d*[\.]?\d+)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/i;if(t.test(e)){var r=e.match(t),n=r[1],a=r[2],s=r[3],u=r[4];return{model:"hsv",values:[Object(o.d)(n),Object(o.b)(parseFloat(a),0,100),Object(o.b)(parseFloat(s),0,100)],alpha:Object(o.g)(u)}}return null}(e);case"cmy":return function(e){var t=/^cmyk\s*\(\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/i;if(t.test(e)){var r=e.match(t),n=r[1],a=r[2],s=r[3],u=r[4],i=r[5];return{model:"cmyk",values:[Object(o.b)(parseFloat(n),0,100),Object(o.b)(parseFloat(a),0,100),Object(o.b)(parseFloat(s),0,100),Object(o.b)(parseFloat(u),0,100)],alpha:Object(o.g)(i)}}return null}(e);default:return function(e){var t,r,n=/^#?([a-f0-9]{6})([a-f0-9]{2})?$/i,a=/^#?([a-f0-9]{3})([a-f0-9]{1})?$/i,s=/^rgba?\s*\(\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/,u=/^rgba?\s*\(\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/,i=function(e){return Math.round(parseInt(e,16)/255*100)/100};if(n.test(e)){var c=e.match(n),l=c[1],h=c[2];t=l.match(/.{2}/g).map(function(e){return parseInt(e,16)}),r=h?i(h):1}else if(a.test(e)){var p=e.match(a),l=p[1],h=p[2];t=l.match(/.{1}/g).map(function(e){return parseInt(e+e,16)}),r=h?i(h):1}else if(s.test(e)){var b=e.match(s),f=b[1],d=b[2],m=b[3],h=b[4];t=[f,d,m].map(function(e){return parseInt(e,0)}),r=Object(o.g)(h)}else{if(!u.test(e))return null;var g=e.match(u),f=g[1],d=g[2],m=g[3],h=g[4];t=[f,d,m].map(function(e){return Math.round(2.55*parseFloat(e))}),r=Object(o.g)(h)}return{model:"rgb",values:t.map(function(e){return Object(o.b)(e,0,255)}),alpha:Object(o.b)(r,0,1)}}(e)}}};var n=r(1),a=r(2),o=r(0)}])});

25

package.json
{
"name": "moo-color",
"version": "0.1.0",
"version": "0.1.1",
"description": "A simple color library.",
"main": "dist/moo-color.js",
"types": "types/moo-color.d.ts",
"directories": {
"doc": "docs",
"test": "test"
},
"scripts": {
"test": "npx jest",
"build": "npx webpack --hide-modules",
"test": "jest",
"build": "webpack --hide-modules",
"watch": "npm run build -- --watch"

@@ -30,10 +34,11 @@ },

"devDependencies": {
"@types/jest": "^22.1.1",
"jest": "^22.1.4",
"@types/jest": "^22.1.4",
"jest": "^22.4.2",
"source-map-loader": "^0.2.3",
"ts-jest": "^22.0.2",
"ts-loader": "^3.3.1",
"typescript": "^2.6.2",
"uglifyjs-webpack-plugin": "^1.1.8",
"webpack": "^3.10.0",
"ts-jest": "^22.4.0",
"ts-loader": "^3.5.0",
"typescript": "^2.7.2",
"uglifyjs-webpack-plugin": "^1.2.2",
"webpack": "^3.11.0",
"webpack-cli": "^2.0.10",
"webpack-notifier": "^1.5.1"

@@ -40,0 +45,0 @@ },

2

README.md

@@ -23,3 +23,3 @@ # MooColor

See you soon.
Please see [MooColor API](https://github.com/archco/moo-color/tree/master/docs#moocolor-api).

@@ -26,0 +26,0 @@ ## Change Log

47

src/color-formatter.ts

@@ -6,5 +6,8 @@ import {

ColorSettable,
HexMode,
RgbMode,
} from './color';
import * as Converter from './color-converter';
import { decimal, resolveAlpha } from './util/util';
import Names from './color-names';
import { arrayIsEqual, decimal, resolveAlpha } from './util/util';

@@ -70,6 +73,14 @@ export class ColorFormatter implements ColorSettable, ColorRepresentable {

/**
* Represents color as notation of specific color model.
*
* @param {(AcceptedModel|'hex')} [model] - Specify color model.
* If not specifying this value, then returns current color model.
* @param {...any[]} args - Arguments for the represent methods.
* @returns {string}
*/
toString(model?: AcceptedModel|'hex', ...args: any[]): string {
model = model ? model : this.color.model;
switch (model) {
case 'hex': return this.toHex(args[0]);
case 'hex': return this.toHex(...args);
case 'hwb': return this.toHwb();

@@ -79,3 +90,3 @@ case 'hsl': return this.toHsl();

case 'cmyk': return this.toCmyk();
default: return this.toRgb();
default: return this.toRgb(...args);
}

@@ -87,10 +98,25 @@ }

* @see https://www.w3.org/TR/css-color-4/#hex-notation
* @param {boolean} [enableShort] default is false.
*
* @param {HexMode} [mode='full'] 'full'|'short'|'name'
* @returns {string}
*/
toHex(enableShort?: boolean): string {
toHex(mode: HexMode = 'full'): string {
const color = this.getColorAs('rgb');
const [r, g, b] = color.values.map(x => Math.round(x));
const a = color.alpha === 1 ? null : color.alpha;
return `#${Converter.rgbToHex(r, g, b, a, true)}`;
const nameOrShort = () => {
let name = '';
for (const key of Object.keys(Names)) {
if (arrayIsEqual(Names[key], [r, g, b])) {
name = key; break;
}
}
return a === null && name !== '' ? name : `#${Converter.rgbToHex(r, g, b, a, true)}`;
};
switch (mode) {
case 'name': return nameOrShort();
case 'short': return `#${Converter.rgbToHex(r, g, b, a, true)}`;
case 'full':
default: return `#${Converter.rgbToHex(r, g, b, a)}`;
}
}

@@ -101,7 +127,12 @@

* @see https://www.w3.org/TR/css-color-4/#rgb-functions
*
* @param {RgbMode} [mode='default'] 'default'|'percent'
* @returns {string}
*/
toRgb(): string {
toRgb(mode: RgbMode = 'default'): string {
const color = this.getColorAs('rgb');
const [r, g, b] = color.values.map(x => Math.round(x));
let [r, g, b]: number[]|string[] = color.values.map(x => Math.round(x));
if (mode === 'percent') {
[r, g, b] = [r, g, b].map(x => `${x / 255 * 100}%`);
}
return color.alpha === 1

@@ -108,0 +139,0 @@ ? `rgb(${r}, ${g}, ${b})`

51

src/color.ts

@@ -1,2 +0,10 @@

// A data object that includes color data.
export type Color = ColorData;
export type AcceptedModel = 'rgb'|'hwb'|'hsl'|'hsv'|'cmyk';
/** Type for `ColorSettable.toHex()` method. */
export type HexMode = 'full'|'short'|'name';
/** Type for `ColorSettable.toRgb()` method. */
export type RgbMode = 'default'|'percent';
/** A data object that includes color data. */
export interface ColorData {

@@ -8,6 +16,13 @@ model: AcceptedModel;

export type Color = ColorData;
export type AcceptedModel = 'rgb'|'hwb'|'hsl'|'hsv'|'cmyk';
/** An argument for `ColorModifiable.random()` method. */
export interface RandomArguments {
/** The hue value from 0 to 360. Also you can give this as range. e.g. [0, 180] */
hue?: number|[number, number];
/** The whiteness value from 0 to 100. Also you can give this as range. e.g. [0, 50] */
white?: number|[number, number];
/** The blackness value from 0 to 100. Also you can give this as range. e.g. [0, 50] */
black?: number|[number, number];
}
// It can set or get color data. and also can change color to another model.
/** It can set or get color data. and also can change color to another model. */
export interface ColorSettable {

@@ -26,4 +41,6 @@ color?: Color;

// It can represent color to multiple notations.
// accepted color models: 'rgb'|'hwb'|'hsl'|'hsv'|'cmyk' + 'hex'
/**
* It can represent color to multiple notations.
* accepted color models: 'rgb'|'hwb'|'hsl'|'hsv'|'cmyk' + 'hex'
*/
export interface ColorRepresentable {

@@ -33,4 +50,4 @@ color?: Color;

toString(model?: AcceptedModel|'hex', ...args: any[]): string;
toHex(enableShort?: boolean): string;
toRgb(): string;
toHex(mode?: HexMode): string;
toRgb(mode?: RgbMode): string;
toHwb(): string;

@@ -42,5 +59,7 @@ toHsl(): string;

// It can access color state. such as brightness, luminance..
// @see https://www.w3.org/TR/AERT/#color-contrast
// @see https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
/**
* It can access color state. such as brightness, luminance..
* @see https://www.w3.org/TR/AERT/#color-contrast
* @see https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
*/
export interface ColorStateAccessible {

@@ -58,3 +77,5 @@ color?: Color;

// It can manipulate color values.
/**
* It can manipulate color values.
*/
export interface ColorModifiable<T extends ColorSettable> {

@@ -72,5 +93,5 @@ color?: Color;

mix(color: T, percent?: number): T;
// TODO: add methods: complement, invert
// @see http://sass-lang.com/documentation/Sass/Script/Functions.html
complement(): this;
invert(percent?: number): this;
random(arg?: RandomArguments): this;
}

82

src/input-parser.ts

@@ -44,27 +44,22 @@ import { Color } from './color';

const percent = /^rgba?\s*\(\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/;
let match: RegExpMatchArray;
const hexToAlpha = (num: string) => Math.round((parseInt(num, 16) / 255) * 100) / 100;
let val: number[];
let a: number;
let values: number[];
let alpha: number;
if (hex.test(input)) {
match = input.match(hex);
const hexPart = match[1];
const alphaPart = match[2];
val = hexPart.match(/.{2}/g).map(x => parseInt(x, 16));
a = alphaPart ? hexToAlpha(alphaPart) : 1;
const [, h, a] = input.match(hex);
values = h.match(/.{2}/g).map(x => parseInt(x, 16));
alpha = a ? hexToAlpha(a) : 1;
} else if (shortHex.test(input)) {
match = input.match(shortHex);
const hexPart = match[1];
const alphaPart = match[2];
val = hexPart.match(/.{1}/g).map(x => parseInt(x + x, 16));
a = alphaPart ? hexToAlpha(alphaPart) : 1;
const [, h, a] = input.match(shortHex);
values = h.match(/.{1}/g).map(x => parseInt(x + x, 16));
alpha = a ? hexToAlpha(a) : 1;
} else if (rgba.test(input)) {
match = input.match(rgba);
val = match.slice(1, 4).map(x => parseInt(x, 0));
a = resolveAlpha(match[4]);
const [, r, g, b, a] = input.match(rgba);
values = [r, g, b].map(x => parseInt(x, 0));
alpha = resolveAlpha(a);
} else if (percent.test(input)) {
match = input.match(percent);
val = match.slice(1, 4).map(x => Math.round(parseFloat(x) * 2.55));
a = resolveAlpha(match[4]);
const [, r, g, b, a] = input.match(percent);
values = [r, g, b].map(x => Math.round(parseFloat(x) * 2.55));
alpha = resolveAlpha(a);
} else {

@@ -75,4 +70,4 @@ return null;

model: 'rgb',
values: val.map(x => clamp(x, 0, 255)),
alpha: clamp(a, 0, 1),
values: values.map(x => clamp(x, 0, 255)),
alpha: clamp(alpha, 0, 1),
};

@@ -86,11 +81,11 @@ }

if (hsl.test(input)) {
const match = input.match(hsl);
const [, h, s, l, a] = input.match(hsl);
return {
model: 'hsl',
values: [
degree(match[1]),
clamp(parseFloat(match[2]), 0, 100),
clamp(parseFloat(match[3]), 0, 100),
degree(h),
clamp(parseFloat(s), 0, 100),
clamp(parseFloat(l), 0, 100),
],
alpha: resolveAlpha(match[4]),
alpha: resolveAlpha(a),
};

@@ -107,10 +102,11 @@ } else {

if (hwb.test(input)) {
const match = input.match(hwb);
const h = degree(match[1]);
const w = clamp(parseFloat(match[2]), 0, 100);
const b = clamp(parseFloat(match[3]), 0, 100);
const [, h, w, b, a] = input.match(hwb);
return {
model: 'hwb',
values: resolveHwb(h, w, b),
alpha: resolveAlpha(match[4]),
values: resolveHwb(
degree(h),
clamp(parseFloat(w), 0, 100),
clamp(parseFloat(b), 0, 100),
),
alpha: resolveAlpha(a),
};

@@ -127,11 +123,11 @@ } else {

if (hsv.test(input)) {
const match = input.match(hsv);
const [, h, s, v, a] = input.match(hsv);
return {
model: 'hsv',
values: [
degree(match[1]),
clamp(parseFloat(match[2]), 0, 100),
clamp(parseFloat(match[3]), 0, 100),
degree(h),
clamp(parseFloat(s), 0, 100),
clamp(parseFloat(v), 0, 100),
],
alpha: resolveAlpha(match[4]),
alpha: resolveAlpha(a),
};

@@ -148,12 +144,12 @@ } else {

if (cmyk.test(input)) {
const match = input.match(cmyk);
const [, c, m, y, k, a] = input.match(cmyk);
return {
model: 'cmyk',
values: [
clamp(parseFloat(match[1]), 0, 100),
clamp(parseFloat(match[2]), 0, 100),
clamp(parseFloat(match[3]), 0, 100),
clamp(parseFloat(match[4]), 0, 100),
clamp(parseFloat(c), 0, 100),
clamp(parseFloat(m), 0, 100),
clamp(parseFloat(y), 0, 100),
clamp(parseFloat(k), 0, 100),
],
alpha: resolveAlpha(match[5]),
alpha: resolveAlpha(a),
};

@@ -160,0 +156,0 @@ } else {

83

src/moo-color.ts

@@ -6,6 +6,7 @@ import {

ColorStateAccessible,
RandomArguments,
} from './color';
import { ColorFormatter } from './color-formatter';
import parser from './input-parser';
import { clamp, degree } from './util/util';
import { clamp, decimal, degree, getRandom } from './util/util';

@@ -46,3 +47,3 @@ export * from './color';

/**
* Color brightness. 0-255 (It based RGB)
* Returns color brightness from 0 to 255. (It based RGB)
* @see https://www.w3.org/TR/AERT/#color-contrast

@@ -76,4 +77,4 @@ * @readonly

/**
* Returns luminance value of color.
* @see https://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-contrast
* Returns luminance value of the color. value from 0 to 1.
* @see https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
* @readonly

@@ -89,3 +90,3 @@ * @type {number}

* Returns contrast ratio with other color. range from 0 to 21.
* @see https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#contrast-ratiodef
* @see https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
* @param {MooColor} color

@@ -102,2 +103,3 @@ * @returns {number} 0-21

* Return true if contrast ratio >= 4.5
* @see https://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-contrast
* @param {MooColor} color

@@ -112,3 +114,3 @@ * @returns {boolean}

* Increase lightness.
* @param {number} amount 0-100
* @param {number} amount The amount from 0 to 100.
* @returns {this}

@@ -125,3 +127,3 @@ */

* Decrease lightness.
* @param {number} amount 0-100
* @param {number} amount The amount from 0 to 100.
* @returns {this}

@@ -138,3 +140,3 @@ */

* Increase saturation.
* @param {number} amount 0-100
* @param {number} amount The amount from 0 to 100.
* @returns {this}

@@ -151,3 +153,3 @@ */

* Decrease saturation.
* @param {number} amount 0-100
* @param {number} amount The amount from 0 to 100.
* @returns {this}

@@ -163,3 +165,3 @@ */

/**
* Set saturation to 0.
* Sets saturation value to 0.
* @returns {this}

@@ -173,3 +175,3 @@ */

* Modify whiteness.
* @param {number} amount -100-100
* @param {number} amount The amount from -100 to 100.
* @returns {this}

@@ -186,3 +188,3 @@ */

* Modify blackness.
* @param {number} amount -100-100
* @param {number} amount The amount from -100 to 100.
* @returns {this}

@@ -208,5 +210,5 @@ */

* Mix two colors.
* @param {MooColor} color the color to mixed.
* @param {number} [percent=50] percentage of color to be mixed.
* @returns {MooColor}
* @param {MooColor} color The color to mixed.
* @param {number} [percent=50] The percentage value of color to be mixed.
* @returns {MooColor} The mixed color that as a new instance of `MooColor`.
*/

@@ -218,11 +220,54 @@ mix(color: MooColor, percent: number = 50): MooColor {

const c2 = color.getColorAs('rgb');
const val = c1.values.map((v, i) => v + (c2.values[i] - v) * percent);
const a = c1.alpha + (c2.alpha - c1.alpha) * percent;
return new MooColor().setColor({
model: 'rgb',
values: val,
alpha: a,
values: c1.values.map((v, i) => v + (c2.values[i] - v) * percent),
alpha: c1.alpha + (c2.alpha - c1.alpha) * percent,
}).changeModel(m);
}
/**
* Sets color to the complement of a color.
*
* @returns {this}
*/
complement(): this {
return this.manipulate('hsl', (h, s, l) => [degree(h + 180), s, l]);
}
/**
* Sets color to the inverse (negative) of a color.
*
* @param {number} [percent=100] The relative percent of the color that inverse.
* @returns {this}
*/
invert(percent: number = 100): this {
percent /= 100;
const absRound = (x: number) => Math.round(Math.abs(x));
return this.manipulate('rgb', (r, g, b) => [r, g, b].map(x => absRound(255 * percent - x)));
}
/**
* Sets random color values as HWB color model.
*
* @param {RandomArguments} [{hue, white, black}={}]
* @returns {this}
*/
random({hue, white, black}: RandomArguments = {}): this {
[hue, white, black] = [hue, white, black].map((x, i) => {
if (typeof x === 'number') {
return x;
} else if (Array.isArray(x)) {
const precision = i === 0 ? 0 : 2;
return getRandom(Math.min(...x), Math.max(...x), precision);
} else {
return i === 0 ? getRandom(0, 360) : getRandom(0, 100, 2);
}
});
return this.setColor({
model: 'hwb',
values: this.resolveHwb(degree(hue), clamp(white, 0, 100), clamp(black, 0, 100)),
alpha: 1,
});
}
protected manipulate(asModel: AcceptedModel, callback: manipulateFn): this {

@@ -229,0 +274,0 @@ const m = this.color.model;

20

src/util/util.ts

@@ -23,9 +23,9 @@ export function padStart(str: string, length: number, chars: string): string {

export function degree(num: string|number): number {
return ((parseFloat(num.toString()) % 360) + 360) % 360;
num = typeof num === 'string' ? parseFloat(num) : num;
return (num % 360 + 360) % 360;
}
export function resolveAlpha(a: string|number): number {
a = typeof a === 'number' ? a.toString() : a;
const num = parseFloat(a);
return clamp(isNaN(num) ? 1 : num, 0, 1);
a = typeof a === 'string' ? parseFloat(a) : a;
return clamp(isNaN(a) ? 1 : a, 0, 1);
}

@@ -38,1 +38,13 @@

}
export function getRandom(min: number, max: number, precision: number = 0): number {
const num = Math.random() * (max - min) + min;
return decimal(num, precision);
}
// https://stackoverflow.com/questions/7837456/how-to-compare-arrays-in-javascript#answer-19746771
export function arrayIsEqual(arr1: any[], arr2: any[]): boolean {
return arr1.length === arr2.length && arr1.every((v, i) => {
return Array.isArray(v) ? arrayIsEqual(v, arr2[i]) : v === arr2[i];
});
}

24

test/color-fomatter.spec.ts

@@ -26,8 +26,18 @@ import { ColorFormatter } from '../src/color-formatter';

it('represent to hex string.', () => {
const color = parser('hsv(160, 50%, 100%)');
const color = parser('rgb(255, 255, 255)');
const hex = cf.setColor(color).toHex();
expect(hex).toEqual('#80ffd4');
const color2 = parser('rgb(255, 255, 255)');
expect(cf.setColor(color2).toHex()).toEqual('#fff');
expect(hex).toEqual('#ffffff');
});
it('"short" mode.', () => {
const color = parser('rgb(255, 0, 0)');
const hex = cf.setColor(color).toHex('short');
expect(hex).toEqual('#f00');
});
it('"name" mode.', () => {
const color = parser('rgb(255, 0, 0)');
const hex = cf.setColor(color).toHex('name');
expect(hex).toEqual('red');
});
});

@@ -42,2 +52,8 @@

});
it('"percent" mode.', () => {
const color = parser('#f0f');
expect(cf.setColor(color).toRgb('percent')).toEqual('rgb(100%, 0%, 100%)');
expect(cf.setAlpha(.5).toRgb('percent')).toEqual('rgba(100%, 0%, 100%, 0.5)');
});
});

@@ -44,0 +60,0 @@

73

test/moo-color.spec.ts

@@ -18,3 +18,3 @@ import { MooColor } from '../src/moo-color';

it('if no argument, color is black.', () => {
expect(new MooColor().toHex(true)).toEqual('#000');
expect(new MooColor().toHex('short')).toEqual('#000');
});

@@ -131,5 +131,5 @@ });

c.rotate(120);
expect(c.toHex(true)).toEqual('#0f0'); // 120 = green.
expect(c.toHex('short')).toEqual('#0f0'); // 120 = green.
c.rotate(-180);
expect(c.toHex(true)).toEqual('#f0f'); // 300 = magenta.
expect(c.toHex('short')).toEqual('#f0f'); // 300 = magenta.
});

@@ -154,2 +154,69 @@ });

});
describe('#complement', () => {
it('adjusts hue value to 180 degree.', () => {
const c = new MooColor('hsl(30, 100%, 50%)');
c.complement();
expect(c.toString()).toEqual('hsl(210, 100%, 50%)');
c.complement();
expect(c.toString()).toEqual('hsl(30, 100%, 50%)');
});
});
describe('#invert', () => {
it('inverts rgb values.', () => {
const c = new MooColor('#0ff');
c.invert();
expect(c.toHex('short')).toEqual('#f00');
});
it("'percent' argument is the relative weight of the color color's inverse.", () => {
const c = new MooColor('#f00');
c.invert(75); // 75%
expect(c.toHex('short')).toEqual('#40bfbf');
});
});
describe('#random', () => {
it('sets random color.', () => {
for (let i = 0; i < 10; i++) {
const c = new MooColor().random();
const [h, w, b] = c.getColorAs('hwb').values;
expect(h).toBeGreaterThanOrEqual(0);
expect(h).toBeLessThanOrEqual(360);
expect(w).toBeGreaterThanOrEqual(0);
expect(w).toBeLessThanOrEqual(100);
expect(b).toBeGreaterThanOrEqual(0);
expect(b).toBeLessThanOrEqual(100);
}
});
it('specifying whiteness.', () => {
for (let i = 0; i < 10; i++) {
const c = new MooColor().random({white: 50, black: [0, 50]});
const [h, w, b] = c.getColorAs('hwb').values;
expect(h).toBeGreaterThanOrEqual(0);
expect(h).toBeLessThanOrEqual(360);
expect(w).toEqual(50);
expect(b).toBeGreaterThanOrEqual(0);
expect(b).toBeLessThanOrEqual(100);
}
});
it('range setting: hue', () => {
for (let i = 0; i < 10; i++) {
const c = new MooColor().random({ hue: [0, 60] });
const [h, w, b] = c.getColorAs('hwb').values;
expect(h).toBeGreaterThanOrEqual(0);
expect(h).toBeLessThanOrEqual(60);
expect(w).toBeGreaterThanOrEqual(0);
expect(w).toBeLessThanOrEqual(100);
expect(b).toBeGreaterThanOrEqual(0);
expect(b).toBeLessThanOrEqual(100);
}
});
});
});

33

test/util.spec.ts

@@ -21,2 +21,35 @@ import * as Util from '../src/util/util';

});
describe('#getRandom', () => {
it('works.', () => {
for (let i = 0; i < 10; i++) {
const num = Util.getRandom(0, 255, 2);
expect(num).toBeGreaterThanOrEqual(0);
expect(num).toBeLessThanOrEqual(255);
}
});
it('0-360', () => {
for (let i = 0; i < 10; i++) {
const num = Util.getRandom(0, 360);
expect(num).toBeGreaterThanOrEqual(0);
expect(num).toBeLessThanOrEqual(360);
}
});
});
describe('#degree', () => {
it('converts minus to plus degree.', () => {
const d = Util.degree(-45);
expect(d).toEqual(315);
});
});
describe('#arrayIsEqual', () => {
it('works.', () => {
expect(Util.arrayIsEqual([1, 2, 3], [1, 2, 3])).toBe(true);
expect(Util.arrayIsEqual([1, 2, 3], [2, 2, 3])).toBe(false);
expect(Util.arrayIsEqual([1, [2, 3], 4], [1, [2, 3], 4])).toBe(true);
});
});
});

20

types/color-formatter.d.ts

@@ -6,2 +6,4 @@ import {

ColorSettable,
HexMode,
RgbMode,
} from './color.d';

@@ -20,2 +22,11 @@

convert(color: Color, m: AcceptedModel): Color;
/**
* Represents color as notation of specific color model.
*
* @param {(AcceptedModel|'hex')} [model] - Specify color model.
* If not specifying this value, then returns current color model.
* @param {...any[]} args - Arguments for the represent methods.
* @returns {string}
*/
toString(model?: AcceptedModel|'hex', ...args: any[]): string;

@@ -26,6 +37,7 @@

* @see https://www.w3.org/TR/css-color-4/#hex-notation
* @param {boolean} [enableShort] default is false.
*
* @param {HexMode} [mode='full'] 'full'|'short'|'name'
* @returns {string}
*/
toHex(enableShort?: boolean): string;
toHex(mode?: HexMode): string;

@@ -35,5 +47,7 @@ /**

* @see https://www.w3.org/TR/css-color-4/#rgb-functions
*
* @param {RgbMode} [mode='default'] 'default'|'percent'
* @returns {string}
*/
toRgb(): string;
toRgb(mode?: RgbMode): string;

@@ -40,0 +54,0 @@ /**

51

types/color.d.ts

@@ -1,2 +0,10 @@

// A data object that includes color data.
export type Color = ColorData;
export type AcceptedModel = 'rgb'|'hwb'|'hsl'|'hsv'|'cmyk';
/** Type for `ColorSettable.toHex()` method. */
export type HexMode = 'full'|'short'|'name';
/** Type for `ColorSettable.toRgb()` method. */
export type RgbMode = 'default'|'percent';
/** A data object that includes color data. */
export interface ColorData {

@@ -8,6 +16,13 @@ model: AcceptedModel;

export type Color = ColorData;
export type AcceptedModel = 'rgb'|'hwb'|'hsl'|'hsv'|'cmyk';
/** An argument for `ColorModifiable.random()` method. */
export interface RandomArguments {
/** The hue value from 0 to 360. Also you can give this as range. e.g. [0, 180] */
hue?: number|[number, number];
/** The whiteness value from 0 to 100. Also you can give this as range. e.g. [0, 50] */
white?: number|[number, number];
/** The blackness value from 0 to 100. Also you can give this as range. e.g. [0, 50] */
black?: number|[number, number];
}
// It can set or get color data. and also can change color to another model.
/** It can set or get color data. and also can change color to another model. */
export interface ColorSettable {

@@ -26,4 +41,6 @@ color?: Color;

// It can represent color to multiple notations.
// accepted color models: 'rgb'|'hwb'|'hsl'|'hsv'|'cmyk' + 'hex'
/**
* It can represent color to multiple notations.
* accepted color models: 'rgb'|'hwb'|'hsl'|'hsv'|'cmyk' + 'hex'
*/
export interface ColorRepresentable {

@@ -33,4 +50,4 @@ color?: Color;

toString(model?: AcceptedModel|'hex', ...args: any[]): string;
toHex(enableShort?: boolean): string;
toRgb(): string;
toHex(mode?: HexMode): string;
toRgb(mode?: RgbMode): string;
toHwb(): string;

@@ -42,5 +59,7 @@ toHsl(): string;

// It can access color state. such as brightness, luminance..
// @see https://www.w3.org/TR/AERT/#color-contrast
// @see https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
/**
* It can access color state. such as brightness, luminance..
* @see https://www.w3.org/TR/AERT/#color-contrast
* @see https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
*/
export interface ColorStateAccessible {

@@ -58,3 +77,5 @@ color?: Color;

// It can manipulate color values.
/**
* It can manipulate color values.
*/
export interface ColorModifiable<T extends ColorSettable> {

@@ -72,5 +93,5 @@ color?: Color;

mix(color: T, percent?: number): T;
// TODO: add methods: complement, invert
// @see http://sass-lang.com/documentation/Sass/Script/Functions.html
complement(): this;
invert(percent?: number): this;
random(arg?: RandomArguments): this;
}

53

types/moo-color.d.ts

@@ -6,2 +6,3 @@ import {

ColorStateAccessible,
RandomArguments,
} from './color';

@@ -18,3 +19,3 @@ import { ColorFormatter } from './color-formatter';

/**
* Color brightness. 0-255 (It based RGB)
* Returns color brightness from 0 to 255. (It based RGB)
* @see https://www.w3.org/TR/AERT/#color-contrast

@@ -41,4 +42,4 @@ * @readonly

/**
* Returns luminance value of color.
* @see https://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-contrast
* Returns luminance value of the color. value from 0 to 1.
* @see https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
* @readonly

@@ -60,3 +61,3 @@ * @type {number}

* Returns contrast ratio with other color. range from 0 to 21.
* @see https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#contrast-ratiodef
* @see https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
* @param {MooColor} color

@@ -69,2 +70,3 @@ * @returns {number} 0-21

* Return true if contrast ratio >= 4.5
* @see https://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-contrast
* @param {MooColor} color

@@ -77,3 +79,3 @@ * @returns {boolean}

* Increase lightness.
* @param {number} amount 0-100
* @param {number} amount The amount from 0 to 100.
* @returns {this}

@@ -85,3 +87,3 @@ */

* Decrease lightness.
* @param {number} amount 0-100
* @param {number} amount The amount from 0 to 100.
* @returns {this}

@@ -93,3 +95,3 @@ */

* Increase saturation.
* @param {number} amount 0-100
* @param {number} amount The amount from 0 to 100.
* @returns {this}

@@ -101,3 +103,3 @@ */

* Decrease saturation.
* @param {number} amount 0-100
* @param {number} amount The amount from 0 to 100.
* @returns {this}

@@ -115,3 +117,3 @@ */

* Modify whiteness.
* @param {number} amount -100-100
* @param {number} amount The amount from -100 to 100.
* @returns {this}

@@ -123,3 +125,3 @@ */

* Modify blackness.
* @param {number} amount -100-100
* @param {number} amount The amount from -100 to 100.
* @returns {this}

@@ -138,7 +140,30 @@ */

* Mix two colors.
* @param {MooColor} color the color to mixed.
* @param {number} [percent=50] percentage of color to be mixed.
* @returns {MooColor}
* @param {MooColor} color The color to mixed.
* @param {number} [percent=50] The percentage value of color to be mixed.
* @returns {MooColor} The mixed color that as a new instance of `MooColor`.
*/
mix(color: MooColor, percent?: number): MooColor;;
mix(color: MooColor, percent?: number): MooColor;
/**
* Sets color to the complement of a color.
*
* @returns {this}
*/
complement(): this;
/**
* Sets color to the inverse (negative) of a color.
*
* @param {number} [percent=100] The relative percent of the color that inverse.
* @returns {this}
*/
invert(percent?: number): this;
/**
* Sets random color values as HWB color model.
*
* @param {RandomArguments} [{hue, white, black}={}]
* @returns {this}
*/
random(arg?: RandomArguments): this;
}
dist/moo-color.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc