"use strict";
|
Object.defineProperty(exports, "__esModule", { value: true });
|
exports.tinycolor = exports.TinyColor = void 0;
|
var conversion_1 = require("./conversion");
|
var css_color_names_1 = require("./css-color-names");
|
var format_input_1 = require("./format-input");
|
var util_1 = require("./util");
|
var TinyColor = /** @class */ (function () {
|
function TinyColor(color, opts) {
|
if (color === void 0) { color = ''; }
|
if (opts === void 0) { opts = {}; }
|
var _a;
|
// If input is already a tinycolor, return itself
|
if (color instanceof TinyColor) {
|
// eslint-disable-next-line no-constructor-return
|
return color;
|
}
|
if (typeof color === 'number') {
|
color = (0, conversion_1.numberInputToObject)(color);
|
}
|
this.originalInput = color;
|
var rgb = (0, format_input_1.inputToRGB)(color);
|
this.originalInput = color;
|
this.r = rgb.r;
|
this.g = rgb.g;
|
this.b = rgb.b;
|
this.a = rgb.a;
|
this.roundA = Math.round(100 * this.a) / 100;
|
this.format = (_a = opts.format) !== null && _a !== void 0 ? _a : rgb.format;
|
this.gradientType = opts.gradientType;
|
// Don't let the range of [0,255] come back in [0,1].
|
// Potentially lose a little bit of precision here, but will fix issues where
|
// .5 gets interpreted as half of the total, instead of half of 1
|
// If it was supposed to be 128, this was already taken care of by `inputToRgb`
|
if (this.r < 1) {
|
this.r = Math.round(this.r);
|
}
|
if (this.g < 1) {
|
this.g = Math.round(this.g);
|
}
|
if (this.b < 1) {
|
this.b = Math.round(this.b);
|
}
|
this.isValid = rgb.ok;
|
}
|
TinyColor.prototype.isDark = function () {
|
return this.getBrightness() < 128;
|
};
|
TinyColor.prototype.isLight = function () {
|
return !this.isDark();
|
};
|
/**
|
* Returns the perceived brightness of the color, from 0-255.
|
*/
|
TinyColor.prototype.getBrightness = function () {
|
// http://www.w3.org/TR/AERT#color-contrast
|
var rgb = this.toRgb();
|
return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
|
};
|
/**
|
* Returns the perceived luminance of a color, from 0-1.
|
*/
|
TinyColor.prototype.getLuminance = function () {
|
// http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
|
var rgb = this.toRgb();
|
var R;
|
var G;
|
var B;
|
var RsRGB = rgb.r / 255;
|
var GsRGB = rgb.g / 255;
|
var BsRGB = rgb.b / 255;
|
if (RsRGB <= 0.03928) {
|
R = RsRGB / 12.92;
|
}
|
else {
|
// eslint-disable-next-line prefer-exponentiation-operator
|
R = Math.pow((RsRGB + 0.055) / 1.055, 2.4);
|
}
|
if (GsRGB <= 0.03928) {
|
G = GsRGB / 12.92;
|
}
|
else {
|
// eslint-disable-next-line prefer-exponentiation-operator
|
G = Math.pow((GsRGB + 0.055) / 1.055, 2.4);
|
}
|
if (BsRGB <= 0.03928) {
|
B = BsRGB / 12.92;
|
}
|
else {
|
// eslint-disable-next-line prefer-exponentiation-operator
|
B = Math.pow((BsRGB + 0.055) / 1.055, 2.4);
|
}
|
return 0.2126 * R + 0.7152 * G + 0.0722 * B;
|
};
|
/**
|
* Returns the alpha value of a color, from 0-1.
|
*/
|
TinyColor.prototype.getAlpha = function () {
|
return this.a;
|
};
|
/**
|
* Sets the alpha value on the current color.
|
*
|
* @param alpha - The new alpha value. The accepted range is 0-1.
|
*/
|
TinyColor.prototype.setAlpha = function (alpha) {
|
this.a = (0, util_1.boundAlpha)(alpha);
|
this.roundA = Math.round(100 * this.a) / 100;
|
return this;
|
};
|
/**
|
* Returns whether the color is monochrome.
|
*/
|
TinyColor.prototype.isMonochrome = function () {
|
var s = this.toHsl().s;
|
return s === 0;
|
};
|
/**
|
* Returns the object as a HSVA object.
|
*/
|
TinyColor.prototype.toHsv = function () {
|
var hsv = (0, conversion_1.rgbToHsv)(this.r, this.g, this.b);
|
return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this.a };
|
};
|
/**
|
* Returns the hsva values interpolated into a string with the following format:
|
* "hsva(xxx, xxx, xxx, xx)".
|
*/
|
TinyColor.prototype.toHsvString = function () {
|
var hsv = (0, conversion_1.rgbToHsv)(this.r, this.g, this.b);
|
var h = Math.round(hsv.h * 360);
|
var s = Math.round(hsv.s * 100);
|
var v = Math.round(hsv.v * 100);
|
return this.a === 1 ? "hsv(".concat(h, ", ").concat(s, "%, ").concat(v, "%)") : "hsva(".concat(h, ", ").concat(s, "%, ").concat(v, "%, ").concat(this.roundA, ")");
|
};
|
/**
|
* Returns the object as a HSLA object.
|
*/
|
TinyColor.prototype.toHsl = function () {
|
var hsl = (0, conversion_1.rgbToHsl)(this.r, this.g, this.b);
|
return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this.a };
|
};
|
/**
|
* Returns the hsla values interpolated into a string with the following format:
|
* "hsla(xxx, xxx, xxx, xx)".
|
*/
|
TinyColor.prototype.toHslString = function () {
|
var hsl = (0, conversion_1.rgbToHsl)(this.r, this.g, this.b);
|
var h = Math.round(hsl.h * 360);
|
var s = Math.round(hsl.s * 100);
|
var l = Math.round(hsl.l * 100);
|
return this.a === 1 ? "hsl(".concat(h, ", ").concat(s, "%, ").concat(l, "%)") : "hsla(".concat(h, ", ").concat(s, "%, ").concat(l, "%, ").concat(this.roundA, ")");
|
};
|
/**
|
* Returns the hex value of the color.
|
* @param allow3Char will shorten hex value to 3 char if possible
|
*/
|
TinyColor.prototype.toHex = function (allow3Char) {
|
if (allow3Char === void 0) { allow3Char = false; }
|
return (0, conversion_1.rgbToHex)(this.r, this.g, this.b, allow3Char);
|
};
|
/**
|
* Returns the hex value of the color -with a # prefixed.
|
* @param allow3Char will shorten hex value to 3 char if possible
|
*/
|
TinyColor.prototype.toHexString = function (allow3Char) {
|
if (allow3Char === void 0) { allow3Char = false; }
|
return '#' + this.toHex(allow3Char);
|
};
|
/**
|
* Returns the hex 8 value of the color.
|
* @param allow4Char will shorten hex value to 4 char if possible
|
*/
|
TinyColor.prototype.toHex8 = function (allow4Char) {
|
if (allow4Char === void 0) { allow4Char = false; }
|
return (0, conversion_1.rgbaToHex)(this.r, this.g, this.b, this.a, allow4Char);
|
};
|
/**
|
* Returns the hex 8 value of the color -with a # prefixed.
|
* @param allow4Char will shorten hex value to 4 char if possible
|
*/
|
TinyColor.prototype.toHex8String = function (allow4Char) {
|
if (allow4Char === void 0) { allow4Char = false; }
|
return '#' + this.toHex8(allow4Char);
|
};
|
/**
|
* Returns the shorter hex value of the color depends on its alpha -with a # prefixed.
|
* @param allowShortChar will shorten hex value to 3 or 4 char if possible
|
*/
|
TinyColor.prototype.toHexShortString = function (allowShortChar) {
|
if (allowShortChar === void 0) { allowShortChar = false; }
|
return this.a === 1 ? this.toHexString(allowShortChar) : this.toHex8String(allowShortChar);
|
};
|
/**
|
* Returns the object as a RGBA object.
|
*/
|
TinyColor.prototype.toRgb = function () {
|
return {
|
r: Math.round(this.r),
|
g: Math.round(this.g),
|
b: Math.round(this.b),
|
a: this.a,
|
};
|
};
|
/**
|
* Returns the RGBA values interpolated into a string with the following format:
|
* "RGBA(xxx, xxx, xxx, xx)".
|
*/
|
TinyColor.prototype.toRgbString = function () {
|
var r = Math.round(this.r);
|
var g = Math.round(this.g);
|
var b = Math.round(this.b);
|
return this.a === 1 ? "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ")") : "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(this.roundA, ")");
|
};
|
/**
|
* Returns the object as a RGBA object.
|
*/
|
TinyColor.prototype.toPercentageRgb = function () {
|
var fmt = function (x) { return "".concat(Math.round((0, util_1.bound01)(x, 255) * 100), "%"); };
|
return {
|
r: fmt(this.r),
|
g: fmt(this.g),
|
b: fmt(this.b),
|
a: this.a,
|
};
|
};
|
/**
|
* Returns the RGBA relative values interpolated into a string
|
*/
|
TinyColor.prototype.toPercentageRgbString = function () {
|
var rnd = function (x) { return Math.round((0, util_1.bound01)(x, 255) * 100); };
|
return this.a === 1
|
? "rgb(".concat(rnd(this.r), "%, ").concat(rnd(this.g), "%, ").concat(rnd(this.b), "%)")
|
: "rgba(".concat(rnd(this.r), "%, ").concat(rnd(this.g), "%, ").concat(rnd(this.b), "%, ").concat(this.roundA, ")");
|
};
|
/**
|
* The 'real' name of the color -if there is one.
|
*/
|
TinyColor.prototype.toName = function () {
|
if (this.a === 0) {
|
return 'transparent';
|
}
|
if (this.a < 1) {
|
return false;
|
}
|
var hex = '#' + (0, conversion_1.rgbToHex)(this.r, this.g, this.b, false);
|
for (var _i = 0, _a = Object.entries(css_color_names_1.names); _i < _a.length; _i++) {
|
var _b = _a[_i], key = _b[0], value = _b[1];
|
if (hex === value) {
|
return key;
|
}
|
}
|
return false;
|
};
|
TinyColor.prototype.toString = function (format) {
|
var formatSet = Boolean(format);
|
format = format !== null && format !== void 0 ? format : this.format;
|
var formattedString = false;
|
var hasAlpha = this.a < 1 && this.a >= 0;
|
var needsAlphaFormat = !formatSet && hasAlpha && (format.startsWith('hex') || format === 'name');
|
if (needsAlphaFormat) {
|
// Special case for "transparent", all other non-alpha formats
|
// will return rgba when there is transparency.
|
if (format === 'name' && this.a === 0) {
|
return this.toName();
|
}
|
return this.toRgbString();
|
}
|
if (format === 'rgb') {
|
formattedString = this.toRgbString();
|
}
|
if (format === 'prgb') {
|
formattedString = this.toPercentageRgbString();
|
}
|
if (format === 'hex' || format === 'hex6') {
|
formattedString = this.toHexString();
|
}
|
if (format === 'hex3') {
|
formattedString = this.toHexString(true);
|
}
|
if (format === 'hex4') {
|
formattedString = this.toHex8String(true);
|
}
|
if (format === 'hex8') {
|
formattedString = this.toHex8String();
|
}
|
if (format === 'name') {
|
formattedString = this.toName();
|
}
|
if (format === 'hsl') {
|
formattedString = this.toHslString();
|
}
|
if (format === 'hsv') {
|
formattedString = this.toHsvString();
|
}
|
return formattedString || this.toHexString();
|
};
|
TinyColor.prototype.toNumber = function () {
|
return (Math.round(this.r) << 16) + (Math.round(this.g) << 8) + Math.round(this.b);
|
};
|
TinyColor.prototype.clone = function () {
|
return new TinyColor(this.toString());
|
};
|
/**
|
* Lighten the color a given amount. Providing 100 will always return white.
|
* @param amount - valid between 1-100
|
*/
|
TinyColor.prototype.lighten = function (amount) {
|
if (amount === void 0) { amount = 10; }
|
var hsl = this.toHsl();
|
hsl.l += amount / 100;
|
hsl.l = (0, util_1.clamp01)(hsl.l);
|
return new TinyColor(hsl);
|
};
|
/**
|
* Brighten the color a given amount, from 0 to 100.
|
* @param amount - valid between 1-100
|
*/
|
TinyColor.prototype.brighten = function (amount) {
|
if (amount === void 0) { amount = 10; }
|
var rgb = this.toRgb();
|
rgb.r = Math.max(0, Math.min(255, rgb.r - Math.round(255 * -(amount / 100))));
|
rgb.g = Math.max(0, Math.min(255, rgb.g - Math.round(255 * -(amount / 100))));
|
rgb.b = Math.max(0, Math.min(255, rgb.b - Math.round(255 * -(amount / 100))));
|
return new TinyColor(rgb);
|
};
|
/**
|
* Darken the color a given amount, from 0 to 100.
|
* Providing 100 will always return black.
|
* @param amount - valid between 1-100
|
*/
|
TinyColor.prototype.darken = function (amount) {
|
if (amount === void 0) { amount = 10; }
|
var hsl = this.toHsl();
|
hsl.l -= amount / 100;
|
hsl.l = (0, util_1.clamp01)(hsl.l);
|
return new TinyColor(hsl);
|
};
|
/**
|
* Mix the color with pure white, from 0 to 100.
|
* Providing 0 will do nothing, providing 100 will always return white.
|
* @param amount - valid between 1-100
|
*/
|
TinyColor.prototype.tint = function (amount) {
|
if (amount === void 0) { amount = 10; }
|
return this.mix('white', amount);
|
};
|
/**
|
* Mix the color with pure black, from 0 to 100.
|
* Providing 0 will do nothing, providing 100 will always return black.
|
* @param amount - valid between 1-100
|
*/
|
TinyColor.prototype.shade = function (amount) {
|
if (amount === void 0) { amount = 10; }
|
return this.mix('black', amount);
|
};
|
/**
|
* Desaturate the color a given amount, from 0 to 100.
|
* Providing 100 will is the same as calling greyscale
|
* @param amount - valid between 1-100
|
*/
|
TinyColor.prototype.desaturate = function (amount) {
|
if (amount === void 0) { amount = 10; }
|
var hsl = this.toHsl();
|
hsl.s -= amount / 100;
|
hsl.s = (0, util_1.clamp01)(hsl.s);
|
return new TinyColor(hsl);
|
};
|
/**
|
* Saturate the color a given amount, from 0 to 100.
|
* @param amount - valid between 1-100
|
*/
|
TinyColor.prototype.saturate = function (amount) {
|
if (amount === void 0) { amount = 10; }
|
var hsl = this.toHsl();
|
hsl.s += amount / 100;
|
hsl.s = (0, util_1.clamp01)(hsl.s);
|
return new TinyColor(hsl);
|
};
|
/**
|
* Completely desaturates a color into greyscale.
|
* Same as calling `desaturate(100)`
|
*/
|
TinyColor.prototype.greyscale = function () {
|
return this.desaturate(100);
|
};
|
/**
|
* Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
|
* Values outside of this range will be wrapped into this range.
|
*/
|
TinyColor.prototype.spin = function (amount) {
|
var hsl = this.toHsl();
|
var hue = (hsl.h + amount) % 360;
|
hsl.h = hue < 0 ? 360 + hue : hue;
|
return new TinyColor(hsl);
|
};
|
/**
|
* Mix the current color a given amount with another color, from 0 to 100.
|
* 0 means no mixing (return current color).
|
*/
|
TinyColor.prototype.mix = function (color, amount) {
|
if (amount === void 0) { amount = 50; }
|
var rgb1 = this.toRgb();
|
var rgb2 = new TinyColor(color).toRgb();
|
var p = amount / 100;
|
var rgba = {
|
r: (rgb2.r - rgb1.r) * p + rgb1.r,
|
g: (rgb2.g - rgb1.g) * p + rgb1.g,
|
b: (rgb2.b - rgb1.b) * p + rgb1.b,
|
a: (rgb2.a - rgb1.a) * p + rgb1.a,
|
};
|
return new TinyColor(rgba);
|
};
|
TinyColor.prototype.analogous = function (results, slices) {
|
if (results === void 0) { results = 6; }
|
if (slices === void 0) { slices = 30; }
|
var hsl = this.toHsl();
|
var part = 360 / slices;
|
var ret = [this];
|
for (hsl.h = (hsl.h - ((part * results) >> 1) + 720) % 360; --results;) {
|
hsl.h = (hsl.h + part) % 360;
|
ret.push(new TinyColor(hsl));
|
}
|
return ret;
|
};
|
/**
|
* taken from https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js
|
*/
|
TinyColor.prototype.complement = function () {
|
var hsl = this.toHsl();
|
hsl.h = (hsl.h + 180) % 360;
|
return new TinyColor(hsl);
|
};
|
TinyColor.prototype.monochromatic = function (results) {
|
if (results === void 0) { results = 6; }
|
var hsv = this.toHsv();
|
var h = hsv.h;
|
var s = hsv.s;
|
var v = hsv.v;
|
var res = [];
|
var modification = 1 / results;
|
while (results--) {
|
res.push(new TinyColor({ h: h, s: s, v: v }));
|
v = (v + modification) % 1;
|
}
|
return res;
|
};
|
TinyColor.prototype.splitcomplement = function () {
|
var hsl = this.toHsl();
|
var h = hsl.h;
|
return [
|
this,
|
new TinyColor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l }),
|
new TinyColor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l }),
|
];
|
};
|
/**
|
* Compute how the color would appear on a background
|
*/
|
TinyColor.prototype.onBackground = function (background) {
|
var fg = this.toRgb();
|
var bg = new TinyColor(background).toRgb();
|
var alpha = fg.a + bg.a * (1 - fg.a);
|
return new TinyColor({
|
r: (fg.r * fg.a + bg.r * bg.a * (1 - fg.a)) / alpha,
|
g: (fg.g * fg.a + bg.g * bg.a * (1 - fg.a)) / alpha,
|
b: (fg.b * fg.a + bg.b * bg.a * (1 - fg.a)) / alpha,
|
a: alpha,
|
});
|
};
|
/**
|
* Alias for `polyad(3)`
|
*/
|
TinyColor.prototype.triad = function () {
|
return this.polyad(3);
|
};
|
/**
|
* Alias for `polyad(4)`
|
*/
|
TinyColor.prototype.tetrad = function () {
|
return this.polyad(4);
|
};
|
/**
|
* Get polyad colors, like (for 1, 2, 3, 4, 5, 6, 7, 8, etc...)
|
* monad, dyad, triad, tetrad, pentad, hexad, heptad, octad, etc...
|
*/
|
TinyColor.prototype.polyad = function (n) {
|
var hsl = this.toHsl();
|
var h = hsl.h;
|
var result = [this];
|
var increment = 360 / n;
|
for (var i = 1; i < n; i++) {
|
result.push(new TinyColor({ h: (h + i * increment) % 360, s: hsl.s, l: hsl.l }));
|
}
|
return result;
|
};
|
/**
|
* compare color vs current color
|
*/
|
TinyColor.prototype.equals = function (color) {
|
return this.toRgbString() === new TinyColor(color).toRgbString();
|
};
|
return TinyColor;
|
}());
|
exports.TinyColor = TinyColor;
|
// kept for backwards compatability with v1
|
function tinycolor(color, opts) {
|
if (color === void 0) { color = ''; }
|
if (opts === void 0) { opts = {}; }
|
return new TinyColor(color, opts);
|
}
|
exports.tinycolor = tinycolor;
|
