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

colorizr

Package Overview
Dependencies
Maintainers
1
Versions
17
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

colorizr - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

src/.DS_Store

338

es/index.js

@@ -11,3 +11,3 @@ var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

import { expr, hasProperty, isPlainObject, pick, round } from './utils';
import { expr, hasProperty, isPlainObject, isRequired, pick, round, validateHex } from './utils';

@@ -47,3 +47,3 @@ var RGB = ['r', 'g', 'b'];

/**
* Change the main color.
* Set the main color.
*

@@ -57,5 +57,3 @@ * @param {string|Array|Object} color

value: function setColor(color) {
if (!color) {
throw new Error('Not a valid color');
}
if (!color) return;

@@ -71,12 +69,24 @@ if (typeof color === 'string') {

} else {
throw new Error('Input not valid');
throw new Error('Invalid input type');
}
}
/**
* Set color from an array.
*
* @private
* @param {Array} input
*/
}, {
key: 'setColorFromArray',
value: function setColorFromArray(color) {
value: function setColorFromArray() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : isRequired('input');
if (!Array.isArray(input)) throw new Error('input is not an array');
this.rgb = {
r: this.limit(color[0], 'r'),
g: this.limit(color[1], 'g'),
b: this.limit(color[2], 'b')
r: this.limit(input[0], 'r'),
g: this.limit(input[1], 'g'),
b: this.limit(input[2], 'b')
};

@@ -87,17 +97,29 @@

}
/**
* Set color from an object.
*
* @private
* @param {Object} input
*/
}, {
key: 'setColorFromObject',
value: function setColorFromObject(color) {
if (hasProperty(color, 'h') && hasProperty(color, 's') && hasProperty(color, 'l')) {
value: function setColorFromObject() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : isRequired('input');
if (!isPlainObject(input)) throw new Error('input is not an object');
if (hasProperty(input, 'h') && hasProperty(input, 's') && hasProperty(input, 'l')) {
this.hsl = {
h: this.limit(color.h, 'h'),
s: this.limit(color.s, 's'),
l: this.limit(color.l, 'l')
h: this.limit(input.h, 'h'),
s: this.limit(input.s, 's'),
l: this.limit(input.l, 'l')
};
this.rgb = this.hsl2rgb();
} else if (hasProperty(color, 'r') && hasProperty(color, 'g') && hasProperty(color, 'b')) {
this.rgb = color;
} else if (hasProperty(input, 'r') && hasProperty(input, 'g') && hasProperty(input, 'b')) {
this.rgb = input;
this.hsl = this.rgb2hsl();
} else {
throw new Error('Not a valid object');
throw new Error('Invalid object');
}

@@ -117,3 +139,5 @@

key: 'lighten',
value: function lighten(percentage) {
value: function lighten() {
var percentage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
var hsl = this.shift({

@@ -135,3 +159,5 @@ l: this.constrain(this.lightness, percentage, [0, 100], '+')

key: 'darken',
value: function darken(percentage) {
value: function darken() {
var percentage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
var hsl = this.shift({

@@ -153,3 +179,5 @@ l: this.constrain(this.lightness, percentage, [0, 100], '-')

key: 'saturate',
value: function saturate(percentage) {
value: function saturate() {
var percentage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
var hsl = this.shift({

@@ -163,3 +191,3 @@ s: this.constrain(this.saturation, percentage, [0, 100], '+')

/**
* Descrease saturation.
* Decrease saturation.
*

@@ -172,3 +200,5 @@ * @param {number} percentage

key: 'desaturate',
value: function desaturate(percentage) {
value: function desaturate() {
var percentage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
var hsl = this.shift({

@@ -190,3 +220,5 @@ s: this.constrain(this.saturation, percentage, [0, 100], '-')

key: 'adjustHue',
value: function adjustHue(degrees) {
value: function adjustHue() {
var degrees = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 15;
var hsl = this.shift({

@@ -203,3 +235,3 @@ h: this.constrainDegrees(this.hue, +degrees)

* @param {Object} input
* @param {boolean} returnHex
* @param {boolean} [returnHex]
*

@@ -211,3 +243,4 @@ * @returns {string}

key: 'remix',
value: function remix(input) {
value: function remix() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : isRequired('input');
var returnHex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;

@@ -225,17 +258,2 @@

/**
* Validate HEX color.
*
* @param {string} hex
*
* @returns {boolean}
*/
}, {
key: 'validHex',
value: function validHex(hex) {
return (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(hex)
);
}
/**
* Generate a random color.

@@ -263,5 +281,85 @@ *

/**
* Get the contrasted color for a given hex.
*
* @param {string} input
* @returns {string}
*/
}, {
key: 'textColor',
value: function textColor() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.hex;
var _hex2rgb = this.hex2rgb(input),
r = _hex2rgb.r,
g = _hex2rgb.g,
b = _hex2rgb.b;
var yiq = (r * 299 + g * 587 + b * 114) / 1000;
return yiq >= 128 ? '#000' : '#fff';
}
/**
* Parse HEX color.
*
* @param {string} input
*
* @returns {string}
*/
}, {
key: 'parseHex',
value: function parseHex() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : isRequired('input');
var color = input.replace('#', '');
var hex = color;
if (color.length === 3) {
hex = '';
color.split('').forEach(function (d) {
hex += d + d;
});
}
hex = '#' + hex;
if (!validateHex(hex)) {
throw new Error('Invalid color');
}
return hex;
}
/**
* Parse CSS attribute.
*
* @param {string} input
* @returns {Object}
*/
}, {
key: 'parseCSS',
value: function parseCSS() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : isRequired('input');
var model = /^rgb/.test(input) ? 'rgba' : 'hsla';
var regex = new RegExp('^' + model + '?[\\s+]?\\([\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?', 'i');
var matches = input.match(regex);
if (matches && matches.length === 4) {
var _ref;
return _ref = {}, _defineProperty(_ref, model.slice(0, 1), parseInt(matches[1], 10)), _defineProperty(_ref, model.slice(1, 2), parseInt(matches[2], 10)), _defineProperty(_ref, model.slice(2, 3), parseInt(matches[3], 10)), _ref;
}
throw new Error('Invalid CSS string');
}
/**
* Convert a hex string to RGB object.
*
* @param {string} input
* @param {string} [input]
* @returns {{r: number, g: number, b: number}}

@@ -287,3 +385,3 @@ */

*
* @param {string} input
* @param {string} [input]
* @returns {{h: number, s: number, l: number}}

@@ -303,3 +401,3 @@ */

*
* @param {Object|string} input
* @param {Object|string} [input]
* @returns {{h: number, s: number, l: number}}

@@ -316,3 +414,3 @@ */

if (!hasProperty(rgb, 'r') || !hasProperty(rgb, 'g') || !hasProperty(rgb, 'b')) {
throw new Error('hex2hsl::invalid object');
throw new Error('Invalid object');
}

@@ -346,2 +444,3 @@

break;
/* istanbul ignore next */
default:

@@ -373,3 +472,3 @@ break;

*
* @param {Object|string} input
* @param {Object|string} [input]
*

@@ -387,3 +486,3 @@ * @returns {string}

if (!hasProperty(rgb, 'r') || !hasProperty(rgb, 'g') || !hasProperty(rgb, 'b')) {
throw new Error('rgb2hex::invalid object');
throw new Error('Invalid object');
}

@@ -399,3 +498,3 @@

*
* @param {Object|string} input
* @param {Object|string} [input]
* @returns {{r: number, g: number, b: number}}

@@ -409,10 +508,6 @@ */

var hsl = input;
var hsl = typeof input === 'string' ? this.parseCSS(input) : input;
if (typeof hsl === 'string') {
hsl = this.parseCSS(hsl);
}
if (!hasProperty(hsl, 'h') || !hasProperty(hsl, 's') || !hasProperty(hsl, 'l')) {
throw new Error('hsl2rgb::invalid object');
throw new Error('Invalid object');
}

@@ -454,3 +549,3 @@

*
* @param {Object} hsl
* @param {Object|string} [input]
* @returns {string}

@@ -462,4 +557,6 @@ */

value: function hsl2hex() {
var hsl = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.hsl;
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.hsl;
var hsl = typeof input === 'string' ? this.parseCSS(input) : input;
return this.rgb2hex(this.hsl2rgb(hsl));

@@ -469,2 +566,5 @@ }

/**
* Convert hue to RGB using chroma and median point
*
* @private
* @param {number} point

@@ -479,3 +579,7 @@ * @param {number} chroma

key: 'hue2rgb',
value: function hue2rgb(point, chroma, h) {
value: function hue2rgb() {
var point = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : isRequired('point');
var chroma = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : isRequired('chroma');
var h = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : isRequired('hue');
var hue = h;

@@ -507,36 +611,6 @@

/**
* Parse HEX color.
* Get a shifted color object with the same model of the input.
*
* @param {string} hex
*
* @returns {string}
*/
}, {
key: 'parseHex',
value: function parseHex(hex) {
var color = hex.replace('#', '');
var newHex = '';
if (color.length === 3) {
color.split('').forEach(function (d) {
newHex += d + d;
});
} else {
newHex = color;
}
newHex = '#' + newHex;
if (!this.validHex(newHex)) {
throw new Error('Not a valid color');
}
return newHex;
}
/**
* Parse CSS attribute.
*
* @param {string} input
* @private
* @param {Object} input - {r,g,b} or {h,s,l}
* @returns {Object}

@@ -546,32 +620,14 @@ */

}, {
key: 'parseCSS',
value: function parseCSS(input) {
var model = /^rgb/.test(input) ? 'rgba' : 'hsla';
var regex = new RegExp('^' + model + '?[\\s+]?\\([\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?', 'i');
var matches = input.match(regex);
key: 'shift',
value: function shift() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : isRequired('input');
if (matches && matches.length === 4) {
var _ref;
return _ref = {}, _defineProperty(_ref, model.slice(0, 1), parseInt(matches[1], 10)), _defineProperty(_ref, model.slice(1, 2), parseInt(matches[2], 10)), _defineProperty(_ref, model.slice(2, 3), parseInt(matches[3], 10)), _ref;
if (!isPlainObject(input)) {
throw new Error('Invalid input');
}
throw new Error('Not a valid color');
}
/**
* Get a shifted color object with the same model of the input.
*
* @private
* @param {Object} color - {r,g,b} or {h,s,l}
* @returns {Object}
*/
}, {
key: 'shift',
value: function shift(color) {
var isHSL = Object.keys(color).some(function (d) {
var isHSL = Object.keys(input).some(function (d) {
return HSL.indexOf(d) !== -1;
});
var isRGB = Object.keys(color).some(function (d) {
var isRGB = Object.keys(input).some(function (d) {
return RGB.indexOf(d) !== -1;

@@ -581,3 +637,3 @@ });

if (isRGB && isHSL) {
throw new Error('Only use a single color model');
throw new Error('Use a single color model');
}

@@ -590,8 +646,4 @@

if (isHSL) {
var hsl = pick(color, HSL);
var hsl = pick(input, HSL);
if (!Object.keys(hsl).length) {
return this.hsl;
}
return _extends({}, this.hsl, hsl);

@@ -601,8 +653,4 @@ }

// Not HSL so it must be RGB
var rgb = pick(color, RGB);
var rgb = pick(input, RGB);
if (!Object.keys(rgb).length) {
return this.rgb;
}
return _extends({}, this.rgb, rgb);

@@ -615,3 +663,3 @@ }

* @private
* @param {number} value
* @param {number} input
* @param {string} type

@@ -623,16 +671,20 @@ * @returns {number}

key: 'limit',
value: function limit(value, type) {
if (typeof value !== 'number') {
throw new Error('not a number');
value: function limit() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : isRequired('input');
var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : isRequired('type');
if (typeof input !== 'number') {
throw new Error('Input is not a number');
}
/* istanbul ignore else */
if (RGB.indexOf(type) !== -1) {
return Math.max(Math.min(value, 255), 0);
return Math.max(Math.min(input, 255), 0);
} else if (['s', 'l'].indexOf(type) !== -1) {
return Math.max(Math.min(value, 100), 0);
return Math.max(Math.min(input, 100), 0);
} else if (type === 'h') {
return Math.max(Math.min(value, 360), 0);
return Math.max(Math.min(input, 360), 0);
}
throw new Error('invalid type');
throw new Error('Invalid type');
}

@@ -647,3 +699,3 @@

* @param {Array} range
* @param {string} direction
* @param {string} sign
* @returns {number}

@@ -654,3 +706,8 @@ */

key: 'constrain',
value: function constrain(input, amount, range, direction) {
value: function constrain() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : isRequired('input');
var amount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : isRequired('amount');
var range = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : isRequired('range');
var sign = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : isRequired('sign');
var _range = _slicedToArray(range, 2),

@@ -660,3 +717,3 @@ min = _range[0],

var value = expr(input + direction + amount);
var value = expr(input + sign + amount);

@@ -683,3 +740,6 @@ if (value < min) {

key: 'constrainDegrees',
value: function constrainDegrees(input, amount) {
value: function constrainDegrees() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : isRequired('input');
var amount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : isRequired('amount');
var value = input + amount;

@@ -762,2 +822,4 @@

export { validateHex };
export default Colorizr;

@@ -90,2 +90,6 @@

export function isRequired(name) {
throw new Error((name || 'parameter') + ' is required');
}
/**

@@ -126,2 +130,7 @@ * Creates an object composed of the picked source properties.

return Math.round(input * factor) / factor;
}
export function validateHex(input) {
return (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(input)
);
}
'use strict';
exports.__esModule = true;
exports.validateHex = undefined;

@@ -50,3 +51,3 @@ var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

/**
* Change the main color.
* Set the main color.
*

@@ -60,5 +61,3 @@ * @param {string|Array|Object} color

value: function setColor(color) {
if (!color) {
throw new Error('Not a valid color');
}
if (!color) return;

@@ -74,12 +73,24 @@ if (typeof color === 'string') {

} else {
throw new Error('Input not valid');
throw new Error('Invalid input type');
}
}
/**
* Set color from an array.
*
* @private
* @param {Array} input
*/
}, {
key: 'setColorFromArray',
value: function setColorFromArray(color) {
value: function setColorFromArray() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (0, _utils.isRequired)('input');
if (!Array.isArray(input)) throw new Error('input is not an array');
this.rgb = {
r: this.limit(color[0], 'r'),
g: this.limit(color[1], 'g'),
b: this.limit(color[2], 'b')
r: this.limit(input[0], 'r'),
g: this.limit(input[1], 'g'),
b: this.limit(input[2], 'b')
};

@@ -90,17 +101,29 @@

}
/**
* Set color from an object.
*
* @private
* @param {Object} input
*/
}, {
key: 'setColorFromObject',
value: function setColorFromObject(color) {
if ((0, _utils.hasProperty)(color, 'h') && (0, _utils.hasProperty)(color, 's') && (0, _utils.hasProperty)(color, 'l')) {
value: function setColorFromObject() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (0, _utils.isRequired)('input');
if (!(0, _utils.isPlainObject)(input)) throw new Error('input is not an object');
if ((0, _utils.hasProperty)(input, 'h') && (0, _utils.hasProperty)(input, 's') && (0, _utils.hasProperty)(input, 'l')) {
this.hsl = {
h: this.limit(color.h, 'h'),
s: this.limit(color.s, 's'),
l: this.limit(color.l, 'l')
h: this.limit(input.h, 'h'),
s: this.limit(input.s, 's'),
l: this.limit(input.l, 'l')
};
this.rgb = this.hsl2rgb();
} else if ((0, _utils.hasProperty)(color, 'r') && (0, _utils.hasProperty)(color, 'g') && (0, _utils.hasProperty)(color, 'b')) {
this.rgb = color;
} else if ((0, _utils.hasProperty)(input, 'r') && (0, _utils.hasProperty)(input, 'g') && (0, _utils.hasProperty)(input, 'b')) {
this.rgb = input;
this.hsl = this.rgb2hsl();
} else {
throw new Error('Not a valid object');
throw new Error('Invalid object');
}

@@ -120,3 +143,5 @@

key: 'lighten',
value: function lighten(percentage) {
value: function lighten() {
var percentage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
var hsl = this.shift({

@@ -138,3 +163,5 @@ l: this.constrain(this.lightness, percentage, [0, 100], '+')

key: 'darken',
value: function darken(percentage) {
value: function darken() {
var percentage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
var hsl = this.shift({

@@ -156,3 +183,5 @@ l: this.constrain(this.lightness, percentage, [0, 100], '-')

key: 'saturate',
value: function saturate(percentage) {
value: function saturate() {
var percentage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
var hsl = this.shift({

@@ -166,3 +195,3 @@ s: this.constrain(this.saturation, percentage, [0, 100], '+')

/**
* Descrease saturation.
* Decrease saturation.
*

@@ -175,3 +204,5 @@ * @param {number} percentage

key: 'desaturate',
value: function desaturate(percentage) {
value: function desaturate() {
var percentage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
var hsl = this.shift({

@@ -193,3 +224,5 @@ s: this.constrain(this.saturation, percentage, [0, 100], '-')

key: 'adjustHue',
value: function adjustHue(degrees) {
value: function adjustHue() {
var degrees = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 15;
var hsl = this.shift({

@@ -206,3 +239,3 @@ h: this.constrainDegrees(this.hue, +degrees)

* @param {Object} input
* @param {boolean} returnHex
* @param {boolean} [returnHex]
*

@@ -214,3 +247,4 @@ * @returns {string}

key: 'remix',
value: function remix(input) {
value: function remix() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (0, _utils.isRequired)('input');
var returnHex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;

@@ -228,17 +262,2 @@

/**
* Validate HEX color.
*
* @param {string} hex
*
* @returns {boolean}
*/
}, {
key: 'validHex',
value: function validHex(hex) {
return (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(hex)
);
}
/**
* Generate a random color.

@@ -266,5 +285,85 @@ *

/**
* Get the contrasted color for a given hex.
*
* @param {string} input
* @returns {string}
*/
}, {
key: 'textColor',
value: function textColor() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.hex;
var _hex2rgb = this.hex2rgb(input),
r = _hex2rgb.r,
g = _hex2rgb.g,
b = _hex2rgb.b;
var yiq = (r * 299 + g * 587 + b * 114) / 1000;
return yiq >= 128 ? '#000' : '#fff';
}
/**
* Parse HEX color.
*
* @param {string} input
*
* @returns {string}
*/
}, {
key: 'parseHex',
value: function parseHex() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (0, _utils.isRequired)('input');
var color = input.replace('#', '');
var hex = color;
if (color.length === 3) {
hex = '';
color.split('').forEach(function (d) {
hex += d + d;
});
}
hex = '#' + hex;
if (!(0, _utils.validateHex)(hex)) {
throw new Error('Invalid color');
}
return hex;
}
/**
* Parse CSS attribute.
*
* @param {string} input
* @returns {Object}
*/
}, {
key: 'parseCSS',
value: function parseCSS() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (0, _utils.isRequired)('input');
var model = /^rgb/.test(input) ? 'rgba' : 'hsla';
var regex = new RegExp('^' + model + '?[\\s+]?\\([\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?', 'i');
var matches = input.match(regex);
if (matches && matches.length === 4) {
var _ref;
return _ref = {}, _defineProperty(_ref, model.slice(0, 1), parseInt(matches[1], 10)), _defineProperty(_ref, model.slice(1, 2), parseInt(matches[2], 10)), _defineProperty(_ref, model.slice(2, 3), parseInt(matches[3], 10)), _ref;
}
throw new Error('Invalid CSS string');
}
/**
* Convert a hex string to RGB object.
*
* @param {string} input
* @param {string} [input]
* @returns {{r: number, g: number, b: number}}

@@ -290,3 +389,3 @@ */

*
* @param {string} input
* @param {string} [input]
* @returns {{h: number, s: number, l: number}}

@@ -306,3 +405,3 @@ */

*
* @param {Object|string} input
* @param {Object|string} [input]
* @returns {{h: number, s: number, l: number}}

@@ -319,3 +418,3 @@ */

if (!(0, _utils.hasProperty)(rgb, 'r') || !(0, _utils.hasProperty)(rgb, 'g') || !(0, _utils.hasProperty)(rgb, 'b')) {
throw new Error('hex2hsl::invalid object');
throw new Error('Invalid object');
}

@@ -349,2 +448,3 @@

break;
/* istanbul ignore next */
default:

@@ -376,3 +476,3 @@ break;

*
* @param {Object|string} input
* @param {Object|string} [input]
*

@@ -390,3 +490,3 @@ * @returns {string}

if (!(0, _utils.hasProperty)(rgb, 'r') || !(0, _utils.hasProperty)(rgb, 'g') || !(0, _utils.hasProperty)(rgb, 'b')) {
throw new Error('rgb2hex::invalid object');
throw new Error('Invalid object');
}

@@ -402,3 +502,3 @@

*
* @param {Object|string} input
* @param {Object|string} [input]
* @returns {{r: number, g: number, b: number}}

@@ -412,10 +512,6 @@ */

var hsl = input;
var hsl = typeof input === 'string' ? this.parseCSS(input) : input;
if (typeof hsl === 'string') {
hsl = this.parseCSS(hsl);
}
if (!(0, _utils.hasProperty)(hsl, 'h') || !(0, _utils.hasProperty)(hsl, 's') || !(0, _utils.hasProperty)(hsl, 'l')) {
throw new Error('hsl2rgb::invalid object');
throw new Error('Invalid object');
}

@@ -457,3 +553,3 @@

*
* @param {Object} hsl
* @param {Object|string} [input]
* @returns {string}

@@ -465,4 +561,6 @@ */

value: function hsl2hex() {
var hsl = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.hsl;
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.hsl;
var hsl = typeof input === 'string' ? this.parseCSS(input) : input;
return this.rgb2hex(this.hsl2rgb(hsl));

@@ -472,2 +570,5 @@ }

/**
* Convert hue to RGB using chroma and median point
*
* @private
* @param {number} point

@@ -482,3 +583,7 @@ * @param {number} chroma

key: 'hue2rgb',
value: function hue2rgb(point, chroma, h) {
value: function hue2rgb() {
var point = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (0, _utils.isRequired)('point');
var chroma = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (0, _utils.isRequired)('chroma');
var h = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : (0, _utils.isRequired)('hue');
var hue = h;

@@ -510,36 +615,6 @@

/**
* Parse HEX color.
* Get a shifted color object with the same model of the input.
*
* @param {string} hex
*
* @returns {string}
*/
}, {
key: 'parseHex',
value: function parseHex(hex) {
var color = hex.replace('#', '');
var newHex = '';
if (color.length === 3) {
color.split('').forEach(function (d) {
newHex += d + d;
});
} else {
newHex = color;
}
newHex = '#' + newHex;
if (!this.validHex(newHex)) {
throw new Error('Not a valid color');
}
return newHex;
}
/**
* Parse CSS attribute.
*
* @param {string} input
* @private
* @param {Object} input - {r,g,b} or {h,s,l}
* @returns {Object}

@@ -549,32 +624,14 @@ */

}, {
key: 'parseCSS',
value: function parseCSS(input) {
var model = /^rgb/.test(input) ? 'rgba' : 'hsla';
var regex = new RegExp('^' + model + '?[\\s+]?\\([\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?', 'i');
var matches = input.match(regex);
key: 'shift',
value: function shift() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (0, _utils.isRequired)('input');
if (matches && matches.length === 4) {
var _ref;
return _ref = {}, _defineProperty(_ref, model.slice(0, 1), parseInt(matches[1], 10)), _defineProperty(_ref, model.slice(1, 2), parseInt(matches[2], 10)), _defineProperty(_ref, model.slice(2, 3), parseInt(matches[3], 10)), _ref;
if (!(0, _utils.isPlainObject)(input)) {
throw new Error('Invalid input');
}
throw new Error('Not a valid color');
}
/**
* Get a shifted color object with the same model of the input.
*
* @private
* @param {Object} color - {r,g,b} or {h,s,l}
* @returns {Object}
*/
}, {
key: 'shift',
value: function shift(color) {
var isHSL = Object.keys(color).some(function (d) {
var isHSL = Object.keys(input).some(function (d) {
return HSL.includes(d);
});
var isRGB = Object.keys(color).some(function (d) {
var isRGB = Object.keys(input).some(function (d) {
return RGB.includes(d);

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

if (isRGB && isHSL) {
throw new Error('Only use a single color model');
throw new Error('Use a single color model');
}

@@ -593,8 +650,4 @@

if (isHSL) {
var hsl = (0, _utils.pick)(color, HSL);
var hsl = (0, _utils.pick)(input, HSL);
if (!Object.keys(hsl).length) {
return this.hsl;
}
return _extends({}, this.hsl, hsl);

@@ -604,8 +657,4 @@ }

// Not HSL so it must be RGB
var rgb = (0, _utils.pick)(color, RGB);
var rgb = (0, _utils.pick)(input, RGB);
if (!Object.keys(rgb).length) {
return this.rgb;
}
return _extends({}, this.rgb, rgb);

@@ -618,3 +667,3 @@ }

* @private
* @param {number} value
* @param {number} input
* @param {string} type

@@ -626,16 +675,20 @@ * @returns {number}

key: 'limit',
value: function limit(value, type) {
if (typeof value !== 'number') {
throw new Error('not a number');
value: function limit() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (0, _utils.isRequired)('input');
var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (0, _utils.isRequired)('type');
if (typeof input !== 'number') {
throw new Error('Input is not a number');
}
/* istanbul ignore else */
if (RGB.includes(type)) {
return Math.max(Math.min(value, 255), 0);
return Math.max(Math.min(input, 255), 0);
} else if (['s', 'l'].includes(type)) {
return Math.max(Math.min(value, 100), 0);
return Math.max(Math.min(input, 100), 0);
} else if (type === 'h') {
return Math.max(Math.min(value, 360), 0);
return Math.max(Math.min(input, 360), 0);
}
throw new Error('invalid type');
throw new Error('Invalid type');
}

@@ -650,3 +703,3 @@

* @param {Array} range
* @param {string} direction
* @param {string} sign
* @returns {number}

@@ -657,3 +710,8 @@ */

key: 'constrain',
value: function constrain(input, amount, range, direction) {
value: function constrain() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (0, _utils.isRequired)('input');
var amount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (0, _utils.isRequired)('amount');
var range = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : (0, _utils.isRequired)('range');
var sign = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : (0, _utils.isRequired)('sign');
var _range = _slicedToArray(range, 2),

@@ -663,3 +721,3 @@ min = _range[0],

var value = (0, _utils.expr)(input + direction + amount);
var value = (0, _utils.expr)(input + sign + amount);

@@ -686,3 +744,6 @@ if (value < min) {

key: 'constrainDegrees',
value: function constrainDegrees(input, amount) {
value: function constrainDegrees() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (0, _utils.isRequired)('input');
var amount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (0, _utils.isRequired)('amount');
var value = input + amount;

@@ -765,2 +826,3 @@

exports.validateHex = _utils.validateHex;
exports.default = Colorizr;

@@ -7,4 +7,6 @@ 'use strict';

exports.isPlainObject = isPlainObject;
exports.isRequired = isRequired;
exports.pick = pick;
exports.round = round;
exports.validateHex = validateHex;

@@ -99,2 +101,6 @@

function isRequired(name) {
throw new Error((name || 'parameter') + ' is required');
}
/**

@@ -135,2 +141,7 @@ * Creates an object composed of the picked source properties.

return Math.round(input * factor) / factor;
}
function validateHex(input) {
return (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(input)
);
}
{
"name": "colorizr",
"version": "1.0.1",
"version": "1.0.2",
"description": "Manipulate colors like a boss",

@@ -5,0 +5,0 @@ "author": "Gil Barbara <gilbarbara@gmail.com>",

// @flow
import { expr, hasProperty, isPlainObject, pick, round } from './utils';
import { expr, hasProperty, isPlainObject, isRequired, pick, round, validateHex } from './utils';

@@ -33,3 +33,3 @@ const RGB = ['r', 'g', 'b'];

/**
* Change the main color.
* Set the main color.
*

@@ -39,5 +39,3 @@ * @param {string|Array|Object} color

setColor(color: string | Array<number> | Object) {
if (!color) {
throw new Error('Not a valid color');
}
if (!color) return;

@@ -56,11 +54,19 @@ if (typeof color === 'string') {

else {
throw new Error('Input not valid');
throw new Error('Invalid input type');
}
}
setColorFromArray(color: Array<number>) {
/**
* Set color from an array.
*
* @private
* @param {Array} input
*/
setColorFromArray(input: Array<number> = isRequired('input')) {
if (!Array.isArray(input)) throw new Error('input is not an array');
this.rgb = {
r: this.limit(color[0], 'r'),
g: this.limit(color[1], 'g'),
b: this.limit(color[2], 'b'),
r: this.limit(input[0], 'r'),
g: this.limit(input[1], 'g'),
b: this.limit(input[2], 'b'),
};

@@ -72,17 +78,25 @@

setColorFromObject(color: Object) {
if (hasProperty(color, 'h') && hasProperty(color, 's') && hasProperty(color, 'l')) {
/**
* Set color from an object.
*
* @private
* @param {Object} input
*/
setColorFromObject(input: Object = isRequired('input')) {
if (!isPlainObject(input)) throw new Error('input is not an object');
if (hasProperty(input, 'h') && hasProperty(input, 's') && hasProperty(input, 'l')) {
this.hsl = {
h: this.limit(color.h, 'h'),
s: this.limit(color.s, 's'),
l: this.limit(color.l, 'l'),
h: this.limit(input.h, 'h'),
s: this.limit(input.s, 's'),
l: this.limit(input.l, 'l'),
};
this.rgb = this.hsl2rgb();
}
else if (hasProperty(color, 'r') && hasProperty(color, 'g') && hasProperty(color, 'b')) {
this.rgb = color;
else if (hasProperty(input, 'r') && hasProperty(input, 'g') && hasProperty(input, 'b')) {
this.rgb = input;
this.hsl = this.rgb2hsl();
}
else {
throw new Error('Not a valid object');
throw new Error('Invalid object');
}

@@ -99,3 +113,3 @@

*/
lighten(percentage: number): string {
lighten(percentage: number = 10): string {
const hsl = this.shift({

@@ -114,3 +128,3 @@ l: this.constrain(this.lightness, percentage, [0, 100], '+'),

*/
darken(percentage: number): string {
darken(percentage: number = 10): string {
const hsl = this.shift({

@@ -129,3 +143,3 @@ l: this.constrain(this.lightness, percentage, [0, 100], '-'),

*/
saturate(percentage: number): string {
saturate(percentage: number = 10): string {
const hsl = this.shift({

@@ -139,3 +153,3 @@ s: this.constrain(this.saturation, percentage, [0, 100], '+'),

/**
* Descrease saturation.
* Decrease saturation.
*

@@ -145,3 +159,3 @@ * @param {number} percentage

*/
desaturate(percentage: number): string {
desaturate(percentage: number = 10): string {
const hsl = this.shift({

@@ -160,3 +174,3 @@ s: this.constrain(this.saturation, percentage, [0, 100], '-'),

*/
adjustHue(degrees: number): string {
adjustHue(degrees: number = 15): string {
const hsl = this.shift({

@@ -173,7 +187,7 @@ h: this.constrainDegrees(this.hue, +degrees),

* @param {Object} input
* @param {boolean} returnHex
* @param {boolean} [returnHex]
*
* @returns {string}
*/
remix(input: Object, returnHex: boolean = false): Object | string {
remix(input: Object = isRequired('input'), returnHex: boolean = false): Object | string {
const shift = this.shift(input);

@@ -189,13 +203,2 @@

/**
* Validate HEX color.
*
* @param {string} hex
*
* @returns {boolean}
*/
validHex(hex: string): boolean {
return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(hex);
}
/**
* Generate a random color.

@@ -220,5 +223,68 @@ *

/**
* Get the contrasted color for a given hex.
*
* @param {string} input
* @returns {string}
*/
textColor(input: string = this.hex): string {
const { r, g, b } = this.hex2rgb(input);
const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
return (yiq >= 128) ? '#000' : '#fff';
}
/**
* Parse HEX color.
*
* @param {string} input
*
* @returns {string}
*/
parseHex(input: string = isRequired('input')): string {
const color = input.replace('#', '');
let hex = color;
if (color.length === 3) {
hex = '';
color.split('').forEach(d => {
hex += d + d;
});
}
hex = `#${hex}`;
if (!validateHex(hex)) {
throw new Error('Invalid color');
}
return hex;
}
/**
* Parse CSS attribute.
*
* @param {string} input
* @returns {Object}
*/
parseCSS(input: string = isRequired('input')): Object {
const model = /^rgb/.test(input) ? 'rgba' : 'hsla';
const regex = new RegExp(`^${model}?[\\s+]?\\([\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?`, 'i');
const matches = input.match(regex);
if (matches && matches.length === 4) {
return {
[model.slice(0, 1)]: parseInt(matches[1], 10),
[model.slice(1, 2)]: parseInt(matches[2], 10),
[model.slice(2, 3)]: parseInt(matches[3], 10),
};
}
throw new Error('Invalid CSS string');
}
/**
* Convert a hex string to RGB object.
*
* @param {string} input
* @param {string} [input]
* @returns {{r: number, g: number, b: number}}

@@ -239,3 +305,3 @@ */

*
* @param {string} input
* @param {string} [input]
* @returns {{h: number, s: number, l: number}}

@@ -250,3 +316,3 @@ */

*
* @param {Object|string} input
* @param {Object|string} [input]
* @returns {{h: number, s: number, l: number}}

@@ -258,3 +324,3 @@ */

if (!hasProperty(rgb, 'r') || !hasProperty(rgb, 'g') || !hasProperty(rgb, 'b')) {
throw new Error('hex2hsl::invalid object');
throw new Error('Invalid object');
}

@@ -288,2 +354,3 @@

break;
/* istanbul ignore next */
default:

@@ -316,11 +383,11 @@ break;

*
* @param {Object|string} input
* @param {Object|string} [input]
*
* @returns {string}
*/
rgb2hex(input: Object = this.rgb): string {
rgb2hex(input: Object | string = this.rgb): string {
const rgb = typeof input === 'string' ? this.parseCSS(input) : input;
if (!hasProperty(rgb, 'r') || !hasProperty(rgb, 'g') || !hasProperty(rgb, 'b')) {
throw new Error('rgb2hex::invalid object');
throw new Error('Invalid object');
}

@@ -336,14 +403,10 @@

*
* @param {Object|string} input
* @param {Object|string} [input]
* @returns {{r: number, g: number, b: number}}
*/
hsl2rgb(input: Object | string = this.hsl): Object {
let hsl = input;
const hsl = typeof input === 'string' ? this.parseCSS(input) : input;
if (typeof hsl === 'string') {
hsl = this.parseCSS(hsl);
}
if (!hasProperty(hsl, 'h') || !hasProperty(hsl, 's') || !hasProperty(hsl, 'l')) {
throw new Error('hsl2rgb::invalid object');
throw new Error('Invalid object');
}

@@ -386,6 +449,8 @@

*
* @param {Object} hsl
* @param {Object|string} [input]
* @returns {string}
*/
hsl2hex(hsl: Object = this.hsl): string {
hsl2hex(input: Object | string = this.hsl): string {
const hsl = typeof input === 'string' ? this.parseCSS(input) : input;
return this.rgb2hex(this.hsl2rgb(hsl));

@@ -395,2 +460,5 @@ }

/**
* Convert hue to RGB using chroma and median point
*
* @private
* @param {number} point

@@ -402,3 +470,3 @@ * @param {number} chroma

*/
hue2rgb(point: number, chroma: number, h: number): number {
hue2rgb(point: number = isRequired('point'), chroma: number = isRequired('chroma'), h: number = isRequired('hue')): number {
let hue = h;

@@ -430,65 +498,18 @@

/**
* Parse HEX color.
* Get a shifted color object with the same model of the input.
*
* @param {string} hex
*
* @returns {string}
*/
parseHex(hex: string): string {
const color = hex.replace('#', '');
let newHex = '';
if (color.length === 3) {
color.split('').forEach(d => {
newHex += d + d;
});
}
else {
newHex = color;
}
newHex = `#${newHex}`;
if (!this.validHex(newHex)) {
throw new Error('Not a valid color');
}
return newHex;
}
/**
* Parse CSS attribute.
*
* @param {string} input
* @private
* @param {Object} input - {r,g,b} or {h,s,l}
* @returns {Object}
*/
parseCSS(input: string): Object {
const model = /^rgb/.test(input) ? 'rgba' : 'hsla';
const regex = new RegExp(`^${model}?[\\s+]?\\([\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?`, 'i');
const matches = input.match(regex);
if (matches && matches.length === 4) {
return {
[model.slice(0, 1)]: parseInt(matches[1], 10),
[model.slice(1, 2)]: parseInt(matches[2], 10),
[model.slice(2, 3)]: parseInt(matches[3], 10),
};
shift(input: Object = isRequired('input')): Object {
if (!isPlainObject(input)) {
throw new Error('Invalid input');
}
throw new Error('Not a valid color');
}
const isHSL = Object.keys(input).some(d => HSL.includes(d));
const isRGB = Object.keys(input).some(d => RGB.includes(d));
/**
* Get a shifted color object with the same model of the input.
*
* @private
* @param {Object} color - {r,g,b} or {h,s,l}
* @returns {Object}
*/
shift(color: Object): Object {
const isHSL = Object.keys(color).some(d => HSL.includes(d));
const isRGB = Object.keys(color).some(d => RGB.includes(d));
if (isRGB && isHSL) {
throw new Error('Only use a single color model');
throw new Error('Use a single color model');
}

@@ -501,8 +522,4 @@

if (isHSL) {
const hsl = pick(color, HSL);
const hsl = pick(input, HSL);
if (!Object.keys(hsl).length) {
return this.hsl;
}
return { ...this.hsl, ...hsl };

@@ -512,8 +529,4 @@ }

// Not HSL so it must be RGB
const rgb = pick(color, RGB);
const rgb = pick(input, RGB);
if (!Object.keys(rgb).length) {
return this.rgb;
}
return { ...this.rgb, ...rgb };

@@ -526,22 +539,23 @@ }

* @private
* @param {number} value
* @param {number} input
* @param {string} type
* @returns {number}
*/
limit(value: number, type: string): number {
if (typeof value !== 'number') {
throw new Error('not a number');
limit(input: number = isRequired('input'), type: string = isRequired('type')): number {
if (typeof input !== 'number') {
throw new Error('Input is not a number');
}
/* istanbul ignore else */
if (RGB.includes(type)) {
return Math.max(Math.min(value, 255), 0);
return Math.max(Math.min(input, 255), 0);
}
else if (['s', 'l'].includes(type)) {
return Math.max(Math.min(value, 100), 0);
return Math.max(Math.min(input, 100), 0);
}
else if (type === 'h') {
return Math.max(Math.min(value, 360), 0);
return Math.max(Math.min(input, 360), 0);
}
throw new Error('invalid type');
throw new Error('Invalid type');
}

@@ -556,8 +570,8 @@

* @param {Array} range
* @param {string} direction
* @param {string} sign
* @returns {number}
*/
constrain(input: number, amount: number, range: Array<number>, direction: string): number {
constrain(input: number = isRequired('input'), amount: number = isRequired('amount'), range: Array<number> = isRequired('range'), sign: string = isRequired('sign')): number {
const [min, max] = range;
let value = expr(input + direction + amount);
let value = expr(input + sign + amount);

@@ -582,3 +596,3 @@ if (value < min) {

*/
constrainDegrees(input: number, amount: number): number {
constrainDegrees(input: number = isRequired('input'), amount: number = isRequired('amount')): number {
let value = input + amount;

@@ -640,2 +654,4 @@

export { validateHex };
export default Colorizr;

@@ -90,2 +90,6 @@ // @flow

export function isRequired(name) {
throw new Error(`${name || 'parameter'} is required`);
}
/**

@@ -125,1 +129,5 @@ * Creates an object composed of the picked source properties.

}
export function validateHex(input: string): boolean {
return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(input);
}
SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc