Comparing version 2.0.0 to 2.1.0
import hex2rgb from './hex2rgb'; | ||
import { invariant, isString, messages, round } from './modules/utils'; | ||
import parseCSS from './parse-css'; | ||
import { invariant, isString, messages, round } from './utils'; | ||
/** | ||
@@ -8,10 +8,10 @@ * Get the brightness difference between 2 colors. | ||
export default function brightnessDifference(left, right) { | ||
invariant(!isString(left), messages.left); | ||
invariant(!isString(right), messages.right); | ||
var RGBLeft = hex2rgb(parseCSS(left)); | ||
var RGBRight = hex2rgb(parseCSS(right)); | ||
var rightY = (RGBRight.r * 299 + RGBRight.g * 587 + RGBRight.b * 114) / 1000; | ||
var leftY = (RGBLeft.r * 299 + RGBLeft.g * 587 + RGBLeft.b * 114) / 1000; | ||
invariant(isString(left), messages.left); | ||
invariant(isString(right), messages.right); | ||
const RGBLeft = hex2rgb(parseCSS(left)); | ||
const RGBRight = hex2rgb(parseCSS(right)); | ||
const rightY = (RGBRight.r * 299 + RGBRight.g * 587 + RGBRight.b * 114) / 1000; | ||
const leftY = (RGBLeft.r * 299 + RGBLeft.g * 587 + RGBLeft.b * 114) / 1000; | ||
return round(Math.abs(rightY - leftY), 4); | ||
} | ||
//# sourceMappingURL=brightness-difference.js.map |
import hex2rgb from './hex2rgb'; | ||
import { invariant, isString, messages, round } from './modules/utils'; | ||
import parseCSS from './parse-css'; | ||
import { invariant, isString, messages, round } from './utils'; | ||
/** | ||
@@ -8,8 +8,8 @@ * Get the chroma of a color. | ||
export default function chroma(input) { | ||
invariant(!isString(input), messages.inputString); | ||
var _a = hex2rgb(parseCSS(input)), r = _a.r, g = _a.g, b = _a.b; | ||
var max = Math.max(r, g, b); | ||
var min = Math.min(r, g, b); | ||
invariant(isString(input), messages.inputString); | ||
const { r, g, b } = hex2rgb(parseCSS(input)); | ||
const max = Math.max(r, g, b); | ||
const min = Math.min(r, g, b); | ||
return round((max - min) / 255, 4); | ||
} | ||
//# sourceMappingURL=chroma.js.map |
import hex2rgb from './hex2rgb'; | ||
import { invariant, isString, messages } from './modules/utils'; | ||
import parseCSS from './parse-css'; | ||
import { invariant, isString, messages } from './utils'; | ||
/** | ||
@@ -8,6 +8,6 @@ * Get the difference between 2 colors. | ||
export default function colorDifference(left, right) { | ||
invariant(!isString(left), messages.left); | ||
invariant(!isString(right), messages.right); | ||
var RGBLeft = hex2rgb(parseCSS(left)); | ||
var RGBRight = hex2rgb(parseCSS(right)); | ||
invariant(isString(left), messages.left); | ||
invariant(isString(right), messages.right); | ||
const RGBLeft = hex2rgb(parseCSS(left)); | ||
const RGBRight = hex2rgb(parseCSS(right)); | ||
return (Math.max(RGBLeft.r, RGBRight.r) - | ||
@@ -14,0 +14,0 @@ Math.min(RGBLeft.r, RGBRight.r) + |
import getBrightnessDifference from './brightness-difference'; | ||
import getColorDifference from './color-difference'; | ||
import getContrast from './contrast'; | ||
import { invariant, isString, messages } from './utils'; | ||
import { invariant, isString, messages } from './modules/utils'; | ||
/** | ||
@@ -9,12 +9,12 @@ * Check 2 colors for WCAG compliance. | ||
export default function compare(left, right) { | ||
invariant(!isString(left), messages.left); | ||
invariant(!isString(right), messages.right); | ||
var colorThreshold = 500; | ||
var brightnessThreshold = 125; | ||
var colorDifference = getColorDifference(left, right); | ||
var contrast = getContrast(left, right); | ||
var brightnessDifference = getBrightnessDifference(left, right); | ||
var isBright = brightnessDifference >= brightnessThreshold; | ||
var hasEnoughDifference = colorDifference >= colorThreshold; | ||
var compliant = 0; | ||
invariant(isString(left), messages.left); | ||
invariant(isString(right), messages.right); | ||
const colorThreshold = 500; | ||
const brightnessThreshold = 125; | ||
const colorDifference = getColorDifference(left, right); | ||
const contrast = getContrast(left, right); | ||
const brightnessDifference = getBrightnessDifference(left, right); | ||
const isBright = brightnessDifference >= brightnessThreshold; | ||
const hasEnoughDifference = colorDifference >= colorThreshold; | ||
let compliant = 0; | ||
if (isBright && hasEnoughDifference) { | ||
@@ -27,6 +27,6 @@ compliant = 2; | ||
return { | ||
brightnessDifference: brightnessDifference, | ||
colorDifference: colorDifference, | ||
compliant: compliant, | ||
contrast: contrast, | ||
brightnessDifference, | ||
colorDifference, | ||
compliant, | ||
contrast, | ||
largeAA: contrast >= 3, | ||
@@ -33,0 +33,0 @@ largeAAA: contrast >= 4.5, |
import getLuminance from './luminance'; | ||
import { invariant, isString, messages, round } from './modules/utils'; | ||
import parseCSS from './parse-css'; | ||
import { invariant, isString, messages, round } from './utils'; | ||
/** | ||
@@ -8,15 +8,10 @@ * Get the color contrast between 2 colors. | ||
export default function contrast(left, right) { | ||
invariant(!isString(left), messages.left); | ||
invariant(!isString(right), messages.right); | ||
var LuminanceLeft = getLuminance(parseCSS(left)); | ||
var LuminanceRight = getLuminance(parseCSS(right)); | ||
var output; | ||
if (LuminanceLeft >= LuminanceRight) { | ||
output = (LuminanceLeft + 0.05) / (LuminanceRight + 0.05); | ||
} | ||
else { | ||
output = (LuminanceRight + 0.05) / (LuminanceLeft + 0.05); | ||
} | ||
return round(output); | ||
invariant(isString(left), messages.left); | ||
invariant(isString(right), messages.right); | ||
const LuminanceLeft = getLuminance(parseCSS(left)); | ||
const LuminanceRight = getLuminance(parseCSS(right)); | ||
return round(LuminanceLeft >= LuminanceRight | ||
? (LuminanceLeft + 0.05) / (LuminanceRight + 0.05) | ||
: (LuminanceRight + 0.05) / (LuminanceLeft + 0.05)); | ||
} | ||
//# sourceMappingURL=contrast.js.map |
@@ -1,9 +0,8 @@ | ||
import updater from './updater'; | ||
import updater from './modules/updater'; | ||
/** | ||
* Decrease color lightness | ||
*/ | ||
export default function darken(input, amount) { | ||
if (amount === void 0) { amount = 10; } | ||
export default function darken(input, amount = 10) { | ||
return updater('l', '-')(input, amount); | ||
} | ||
//# sourceMappingURL=darken.js.map |
@@ -1,9 +0,8 @@ | ||
import updater from './updater'; | ||
import updater from './modules/updater'; | ||
/** | ||
* Decrease color saturation | ||
*/ | ||
export default function desaturate(input, amount) { | ||
if (amount === void 0) { amount = 10; } | ||
export default function desaturate(input, amount = 10) { | ||
return updater('s', '-')(input, amount); | ||
} | ||
//# sourceMappingURL=desaturate.js.map |
@@ -0,25 +1,23 @@ | ||
import hex2hsl from './hex2hsl'; | ||
import hex2rgb from './hex2rgb'; | ||
import { invariant, isNumber, isString, messages } from './modules/utils'; | ||
import parseCSS from './parse-css'; | ||
import hex2hsl from './hex2hsl'; | ||
import { invariant, isNumber, isString, messages } from './utils'; | ||
/** | ||
* Fade the color | ||
*/ | ||
export default function fade(input, amount, output) { | ||
if (amount === void 0) { amount = 10; } | ||
if (output === void 0) { output = 'rgb'; } | ||
invariant(!isString(input), messages.inputString); | ||
invariant(!isNumber(amount), messages.amount); | ||
var hex = parseCSS(input); | ||
var percentage = (100 - amount) / 100; | ||
export default function fade(input, amount = 10, output = 'rgb') { | ||
invariant(isString(input), messages.inputString); | ||
invariant(isNumber(amount), messages.amount); | ||
const hex = parseCSS(input); | ||
const percentage = (100 - amount) / 100; | ||
if (output === 'rgb') { | ||
var _a = hex2rgb(hex), r = _a.r, g = _a.g, b = _a.b; | ||
return "rgba(" + r + ", " + g + ", " + b + ", " + percentage + ")"; | ||
const { r, g, b } = hex2rgb(hex); | ||
return `rgba(${r}, ${g}, ${b}, ${percentage})`; | ||
} | ||
if (output === 'hsl') { | ||
var _b = hex2hsl(hex), h = _b.h, s = _b.s, l = _b.l; | ||
return "hsla(" + h + ", " + s + "%, " + l + "%, " + percentage + ")"; | ||
const { h, s, l } = hex2hsl(hex); | ||
return `hsla(${h}, ${s}%, ${l}%, ${percentage})`; | ||
} | ||
return "" + hex + Math.round(percentage * 255).toString(16); | ||
return `${hex}${Math.round(percentage * 255).toString(16)}`; | ||
} | ||
//# sourceMappingURL=fade.js.map |
@@ -0,11 +1,10 @@ | ||
import hsl2rgb from './hsl2rgb'; | ||
import { invariant, isHSL, isNumber, isPlainObject, isRGB, messages } from './modules/utils'; | ||
import rgb2Hsl from './rgb2hsl'; | ||
import { isRGB, isHSL, isNumber, isPlainObject, invariant, messages } from './utils'; | ||
import hsl2rgb from './hsl2rgb'; | ||
export default function formatCSS(input, options) { | ||
if (options === void 0) { options = {}; } | ||
invariant(!isPlainObject(input) || (!isRGB(input) && !isHSL(input)), messages.invalid); | ||
var alpha = options.alpha, _a = options.model, model = _a === void 0 ? isRGB(input) ? 'rgb' : 'hsl' : _a; | ||
var prefix = "" + model + (isNumber(alpha) ? 'a' : ''); | ||
var color = input; | ||
var params = []; | ||
export default function formatCSS(input, options = {}) { | ||
invariant(isPlainObject(input) && (isRGB(input) || isHSL(input)), messages.invalid); | ||
const { alpha, model = isRGB(input) ? 'rgb' : 'hsl' } = options; | ||
const prefix = `${model}${isNumber(alpha) ? 'a' : ''}`; | ||
let color = input; | ||
let params = []; | ||
if (model === 'rgb') { | ||
@@ -21,3 +20,3 @@ if (isHSL(color)) { | ||
} | ||
params = [Math.round(color.h), Math.round(color.s) + "%", Math.round(color.l) + "%"]; | ||
params = [Math.round(color.h), `${Math.round(color.s)}%`, `${Math.round(color.l)}%`]; | ||
} | ||
@@ -27,4 +26,4 @@ if (isNumber(alpha)) { | ||
} | ||
return prefix + "(" + params.join(', ') + ")"; | ||
return `${prefix}(${params.join(', ')})`; | ||
} | ||
//# sourceMappingURL=format-css.js.map |
@@ -1,17 +0,17 @@ | ||
import { invariant, isString, messages } from './utils'; | ||
import isValidHex from './is-valid-hex'; | ||
import { invariant, isString, messages } from './modules/utils'; | ||
export default function formatHex(input) { | ||
invariant(!isString(input), messages.inputString); | ||
var color = input.replace('#', ''); | ||
var hex = color; | ||
invariant(isString(input), messages.inputString); | ||
const color = input.replace('#', ''); | ||
let hex = color; | ||
if (color.length === 3 || color.length === 4) { | ||
hex = ''; | ||
color.split('').forEach(function (d) { | ||
[...color].forEach(d => { | ||
hex += d + d; | ||
}); | ||
} | ||
hex = "#" + hex; | ||
invariant(!isValidHex(hex), 'invalid hex'); | ||
hex = `#${hex}`; | ||
invariant(isValidHex(hex), 'invalid hex'); | ||
return hex; | ||
} | ||
//# sourceMappingURL=format-hex.js.map |
import hex2rgb from './hex2rgb'; | ||
import { invariant, isString, messages } from './modules/utils'; | ||
import rgb2hsl from './rgb2hsl'; | ||
import { invariant, isString, messages } from './utils'; | ||
export default function hex2hsl(input) { | ||
invariant(!isString(input), messages.inputString); | ||
invariant(isString(input), messages.inputString); | ||
return rgb2hsl(hex2rgb(input)); | ||
} | ||
//# sourceMappingURL=hex2hsl.js.map |
import formatHex from './format-hex'; | ||
import { invariant, isString, messages } from './utils'; | ||
import { invariant, isString, messages } from './modules/utils'; | ||
export default function hex2rgb(input) { | ||
invariant(!isString(input), messages.inputString); | ||
var hex = formatHex(input).substr(1); | ||
invariant(isString(input), messages.inputString); | ||
const hex = formatHex(input).substr(1); | ||
return { | ||
@@ -7,0 +7,0 @@ r: parseInt(String(hex.charAt(0)) + hex.charAt(1), 16), |
import hsl2rgb from './hsl2rgb'; | ||
import { invariant, isHSL, messages } from './modules/utils'; | ||
import rgb2hex from './rgb2hex'; | ||
import { invariant, isHSL, messages } from './utils'; | ||
/** | ||
@@ -8,5 +8,5 @@ * Convert a HSL object to HEX. | ||
export default function hsl2hex(input) { | ||
invariant(!isHSL(input), messages.invalid); | ||
invariant(isHSL(input), messages.invalid); | ||
return rgb2hex(hsl2rgb(input)); | ||
} | ||
//# sourceMappingURL=hsl2hex.js.map |
import { HSL, RGB } from './types'; | ||
/** | ||
* Convert a HSL object to RGB. | ||
* Convert an HSL object to RGB. | ||
*/ | ||
export default function hsl2rgb(input: HSL): RGB; |
@@ -1,17 +0,17 @@ | ||
import hue2rgb from './hue2rgb'; | ||
import { invariant, isHSL, messages, round } from './utils'; | ||
import hue2rgb from './modules/hue2rgb'; | ||
import { invariant, isHSL, messages, round } from './modules/utils'; | ||
/** | ||
* Convert a HSL object to RGB. | ||
* Convert an HSL object to RGB. | ||
*/ | ||
export default function hsl2rgb(input) { | ||
invariant(!input, messages.inputString); | ||
invariant(!isHSL(input), 'invalid input'); | ||
var h = round(input.h) / 360; | ||
var s = round(input.s) / 100; | ||
var l = round(input.l) / 100; | ||
var r; | ||
var g; | ||
var b; | ||
var point; | ||
var chroma; | ||
invariant(!!input, messages.inputString); | ||
invariant(isHSL(input), 'invalid input'); | ||
const h = round(input.h) / 360; | ||
const s = round(input.s) / 100; | ||
const l = round(input.l) / 100; | ||
let r; | ||
let g; | ||
let b; | ||
let point; | ||
let chroma; | ||
if (s === 0) { | ||
@@ -18,0 +18,0 @@ r = l; |
@@ -1,12 +0,1 @@ | ||
import chroma from './chroma'; | ||
import compare from './compare'; | ||
import darken from './darken'; | ||
import desaturate from './desaturate'; | ||
import fade from './fade'; | ||
import formatCSS from './format-css'; | ||
import lighten from './lighten'; | ||
import luminance from './luminance'; | ||
import rotate from './rotate'; | ||
import saturate from './saturate'; | ||
import textColor from './text-color'; | ||
import { Analysis, HSL, Options, RGB, RGBArray } from './types'; | ||
@@ -92,6 +81,11 @@ declare class Colorizr { | ||
} | ||
export { chroma, compare, darken, desaturate, fade, formatCSS, lighten, luminance, rotate, saturate, textColor, }; | ||
export { default as brightnessDifference } from './brightness-difference'; | ||
export { default as chroma } from './chroma'; | ||
export { default as colorDifference } from './color-difference'; | ||
export { default as compare } from './compare'; | ||
export { default as contrast } from './contrast'; | ||
export { default as darken } from './darken'; | ||
export { default as desaturate } from './desaturate'; | ||
export { default as fade } from './fade'; | ||
export { default as formatCSS } from './format-css'; | ||
export { default as formatHex } from './format-hex'; | ||
@@ -104,2 +98,4 @@ export { default as hex2hsl } from './hex2hsl'; | ||
export { default as isValidHex } from './is-valid-hex'; | ||
export { default as lighten } from './lighten'; | ||
export { default as luminance } from './luminance'; | ||
export { default as name } from './name'; | ||
@@ -111,4 +107,7 @@ export { default as palette } from './palette'; | ||
export { default as rgb2hsl } from './rgb2hsl'; | ||
export { default as rotate } from './rotate'; | ||
export { default as saturate } from './saturate'; | ||
export { default as scheme } from './scheme'; | ||
export { default as textColor } from './text-color'; | ||
export * from './types'; | ||
export default Colorizr; |
232
esm/index.js
@@ -1,2 +0,1 @@ | ||
import { invariant } from './utils'; | ||
import chroma from './chroma'; | ||
@@ -10,12 +9,16 @@ import compare from './compare'; | ||
import luminance from './luminance'; | ||
import parseColor from './parse-color'; | ||
import parseColor from './modules/parse-color'; | ||
import { invariant } from './modules/utils'; | ||
import rotate from './rotate'; | ||
import saturate from './saturate'; | ||
import textColor from './text-color'; | ||
var Colorizr = /** @class */ (function () { | ||
function Colorizr(color, options) { | ||
if (options === void 0) { options = {}; } | ||
invariant(!color, 'color is required'); | ||
var _a = options.model, model = _a === void 0 ? 'rgb' : _a; | ||
var _b = parseColor(color), hex = _b.hex, hsl = _b.hsl, rgb = _b.rgb; | ||
class Colorizr { | ||
hex; | ||
model; | ||
hsl; | ||
rgb; | ||
constructor(color, options = {}) { | ||
invariant(!!color, 'color is required'); | ||
const { model = 'rgb' } = options; | ||
const { hex, hsl, rgb } = parseColor(color); | ||
this.model = model; | ||
@@ -26,162 +29,120 @@ this.hex = hex; | ||
} | ||
Object.defineProperty(Colorizr.prototype, "css", { | ||
/** | ||
* Get css string | ||
*/ | ||
get: function () { | ||
return formatCSS(this.hsl, { model: this.model }); | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Colorizr.prototype, "red", { | ||
/** | ||
* Get the red value | ||
*/ | ||
get: function () { | ||
return Number(this.rgb.r); | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Colorizr.prototype, "green", { | ||
/** | ||
* Get the green value | ||
*/ | ||
get: function () { | ||
return Number(this.rgb.g); | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Colorizr.prototype, "blue", { | ||
/** | ||
* Get the blue value | ||
*/ | ||
get: function () { | ||
return Number(this.rgb.b); | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Colorizr.prototype, "hue", { | ||
/** | ||
* Get the hue value | ||
*/ | ||
get: function () { | ||
return Number(this.hsl.h); | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Colorizr.prototype, "saturation", { | ||
/** | ||
* Get the saturation value | ||
*/ | ||
get: function () { | ||
return Number(this.hsl.s); | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Colorizr.prototype, "lightness", { | ||
/** | ||
* Get the lightness value | ||
*/ | ||
get: function () { | ||
return Number(this.hsl.l); | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Colorizr.prototype, "luminance", { | ||
/** | ||
* Get the luminance value | ||
*/ | ||
get: function () { | ||
return luminance(this.hex); | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Colorizr.prototype, "chroma", { | ||
/** | ||
* Get the chroma value | ||
*/ | ||
get: function () { | ||
return chroma(this.hex); | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Colorizr.prototype, "textColor", { | ||
/** | ||
* Get the contrasted color | ||
*/ | ||
get: function () { | ||
return textColor(this.hex); | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
/** | ||
* Get css string | ||
*/ | ||
get css() { | ||
return formatCSS(this.hsl, { model: this.model }); | ||
} | ||
/** | ||
* Get the red value | ||
*/ | ||
get red() { | ||
return Number(this.rgb.r); | ||
} | ||
/** | ||
* Get the green value | ||
*/ | ||
get green() { | ||
return Number(this.rgb.g); | ||
} | ||
/** | ||
* Get the blue value | ||
*/ | ||
get blue() { | ||
return Number(this.rgb.b); | ||
} | ||
/** | ||
* Get the hue value | ||
*/ | ||
get hue() { | ||
return Number(this.hsl.h); | ||
} | ||
/** | ||
* Get the saturation value | ||
*/ | ||
get saturation() { | ||
return Number(this.hsl.s); | ||
} | ||
/** | ||
* Get the lightness value | ||
*/ | ||
get lightness() { | ||
return Number(this.hsl.l); | ||
} | ||
/** | ||
* Get the luminance value | ||
*/ | ||
get luminance() { | ||
return luminance(this.hex); | ||
} | ||
/** | ||
* Get the chroma value | ||
*/ | ||
get chroma() { | ||
return chroma(this.hex); | ||
} | ||
/** | ||
* Get the contrasted color | ||
*/ | ||
get textColor() { | ||
return textColor(this.hex); | ||
} | ||
/** | ||
* Test 2 colors for compliance | ||
*/ | ||
Colorizr.prototype.compare = function (input) { | ||
compare(input) { | ||
return compare(this.hex, input); | ||
}; | ||
} | ||
/** | ||
* Increase lightness | ||
*/ | ||
Colorizr.prototype.lighten = function (percentage) { | ||
if (percentage === void 0) { percentage = 10; } | ||
lighten(percentage = 10) { | ||
return lighten(this.hex, percentage); | ||
}; | ||
} | ||
/** | ||
* Decrease lightness | ||
*/ | ||
Colorizr.prototype.darken = function (percentage) { | ||
if (percentage === void 0) { percentage = 10; } | ||
darken(percentage = 10) { | ||
return darken(this.hex, percentage); | ||
}; | ||
} | ||
/** | ||
* Increase saturation | ||
*/ | ||
Colorizr.prototype.saturate = function (percentage) { | ||
if (percentage === void 0) { percentage = 10; } | ||
saturate(percentage = 10) { | ||
return saturate(this.hex, percentage); | ||
}; | ||
} | ||
/** | ||
* Decrease saturation | ||
*/ | ||
Colorizr.prototype.desaturate = function (percentage) { | ||
if (percentage === void 0) { percentage = 10; } | ||
desaturate(percentage = 10) { | ||
return desaturate(this.hex, percentage); | ||
}; | ||
} | ||
/** | ||
* Invert color | ||
*/ | ||
Colorizr.prototype.invert = function () { | ||
invert() { | ||
return rotate(this.hex, 180); | ||
}; | ||
} | ||
/** | ||
* Rotate color | ||
*/ | ||
Colorizr.prototype.rotate = function (degrees) { | ||
if (degrees === void 0) { degrees = 15; } | ||
rotate(degrees = 15) { | ||
return rotate(this.hex, degrees); | ||
}; | ||
} | ||
/** | ||
* Fade color | ||
*/ | ||
Colorizr.prototype.fade = function (percentage) { | ||
if (percentage === void 0) { percentage = 10; } | ||
fade(percentage = 10) { | ||
return fade(this.hex, percentage, this.model); | ||
}; | ||
return Colorizr; | ||
}()); | ||
export { chroma, compare, darken, desaturate, fade, formatCSS, lighten, luminance, rotate, saturate, textColor, }; | ||
} | ||
} | ||
export { default as brightnessDifference } from './brightness-difference'; | ||
export { default as chroma } from './chroma'; | ||
export { default as colorDifference } from './color-difference'; | ||
export { default as compare } from './compare'; | ||
export { default as contrast } from './contrast'; | ||
export { default as darken } from './darken'; | ||
export { default as desaturate } from './desaturate'; | ||
export { default as fade } from './fade'; | ||
export { default as formatCSS } from './format-css'; | ||
export { default as formatHex } from './format-hex'; | ||
@@ -194,2 +155,4 @@ export { default as hex2hsl } from './hex2hsl'; | ||
export { default as isValidHex } from './is-valid-hex'; | ||
export { default as lighten } from './lighten'; | ||
export { default as luminance } from './luminance'; | ||
export { default as name } from './name'; | ||
@@ -201,5 +164,8 @@ export { default as palette } from './palette'; | ||
export { default as rgb2hsl } from './rgb2hsl'; | ||
export { default as rotate } from './rotate'; | ||
export { default as saturate } from './saturate'; | ||
export { default as scheme } from './scheme'; | ||
export { default as textColor } from './text-color'; | ||
export * from './types'; | ||
export default Colorizr; | ||
//# sourceMappingURL=index.js.map |
@@ -7,3 +7,3 @@ import parseCSS from './parse-css'; | ||
} | ||
catch (error) { | ||
catch { | ||
return false; | ||
@@ -10,0 +10,0 @@ } |
@@ -1,2 +0,2 @@ | ||
import { isString } from './utils'; | ||
import { isString } from './modules/utils'; | ||
export default function isValidHex(input) { | ||
@@ -6,4 +6,4 @@ if (!isString(input)) { | ||
} | ||
return /^#([0-9A-F]{3,4}|[0-9A-F]{6,8})$/i.test(input); | ||
return /^#([\da-f]{3,4}|[\da-f]{6,8})$/i.test(input); | ||
} | ||
//# sourceMappingURL=is-valid-hex.js.map |
@@ -1,9 +0,8 @@ | ||
import updater from './updater'; | ||
import updater from './modules/updater'; | ||
/** | ||
* Increase color lightness | ||
*/ | ||
export default function lighten(input, amount) { | ||
if (amount === void 0) { amount = 10; } | ||
export default function lighten(input, amount = 10) { | ||
return updater('l', '+')(input, amount); | ||
} | ||
//# sourceMappingURL=lighten.js.map |
import hex2rgb from './hex2rgb'; | ||
import { invariant, isString, messages, round } from './modules/utils'; | ||
import parseCSS from './parse-css'; | ||
import { invariant, isString, messages, round } from './utils'; | ||
/** | ||
@@ -8,11 +8,11 @@ * Get the luminance of a color. | ||
export default function luminance(input) { | ||
invariant(!isString(input), messages.inputString); | ||
var _a = hex2rgb(parseCSS(input)), r = _a.r, g = _a.g, b = _a.b; | ||
var rgb = [r / 255, g / 255, b / 255]; | ||
for (var i = 0; i < rgb.length; i++) { | ||
if (rgb[i] <= 0.03928) { | ||
rgb[i] /= 12.92; | ||
invariant(isString(input), messages.inputString); | ||
const { r, g, b } = hex2rgb(parseCSS(input)); | ||
const rgb = [r / 255, g / 255, b / 255]; | ||
for (let index = 0; index < rgb.length; index++) { | ||
if (rgb[index] <= 0.03928) { | ||
rgb[index] /= 12.92; | ||
} | ||
else { | ||
rgb[i] = Math.pow(((rgb[i] + 0.055) / 1.055), 2.4); | ||
rgb[index] = ((rgb[index] + 0.055) / 1.055) ** 2.4; | ||
} | ||
@@ -19,0 +19,0 @@ } |
@@ -1,12 +0,10 @@ | ||
import { cssColors, invariant, isString, messages } from './utils'; | ||
import { cssColors } from './modules/css-colors'; | ||
import { invariant, isString, messages } from './modules/utils'; | ||
import parseCSS from './parse-css'; | ||
export default function name(input) { | ||
invariant(!isString(input), messages.inputString); | ||
var hex = parseCSS(input); | ||
var color = (Object.entries(cssColors).find(function (_a) { | ||
var value = _a[1]; | ||
return value === hex; | ||
}) || [])[0]; | ||
invariant(isString(input), messages.inputString); | ||
const hex = parseCSS(input); | ||
const [color] = Object.entries(cssColors).find(([, value]) => value === hex) || []; | ||
return color || hex; | ||
} | ||
//# sourceMappingURL=name.js.map |
@@ -1,29 +0,17 @@ | ||
var __assign = (this && this.__assign) || function () { | ||
__assign = Object.assign || function(t) { | ||
for (var s, i = 1, n = arguments.length; i < n; i++) { | ||
s = arguments[i]; | ||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) | ||
t[p] = s[p]; | ||
} | ||
return t; | ||
}; | ||
return __assign.apply(this, arguments); | ||
}; | ||
import hex2hsl from './hex2hsl'; | ||
import hsl2hex from './hsl2hex'; | ||
import { invariant, isPlainObject, isString, messages } from './modules/utils'; | ||
import parseCSS from './parse-css'; | ||
import rotate from './rotate'; | ||
import { invariant, isPlainObject, isString, messages } from './utils'; | ||
export default function palette(input, options) { | ||
if (options === void 0) { options = {}; } | ||
invariant(!isString(input), messages.inputString); | ||
invariant(!isPlainObject(options), messages.options); | ||
var lightness = options.lightness, saturation = options.saturation, _a = options.size, size = _a === void 0 ? 6 : _a, type = options.type; | ||
var hsl = hex2hsl(parseCSS(input)); | ||
var output = []; | ||
export default function palette(input, options = {}) { | ||
invariant(isString(input), messages.inputString); | ||
invariant(isPlainObject(options), messages.options); | ||
const { lightness, saturation, size = 6, type } = options; | ||
const hsl = hex2hsl(parseCSS(input)); | ||
const output = []; | ||
switch (type) { | ||
case 'monochromatic': { | ||
var step = 80 / size; | ||
for (var i = size; i > 0; i--) { | ||
output.push(hsl2hex(__assign(__assign({}, hsl), { l: step * i }))); | ||
const step = 80 / size; | ||
for (let index = size; index > 0; index--) { | ||
output.push(hsl2hex({ ...hsl, l: step * index })); | ||
} | ||
@@ -33,7 +21,7 @@ break; | ||
default: { | ||
var step = 360 / size; | ||
output.push(hsl2hex(__assign(__assign({}, hsl), { l: lightness || hsl.l, s: saturation || hsl.s }))); | ||
for (var i = 1; i < size; i++) { | ||
var color = rotate(input, hsl.h + step * i); | ||
output.push(hsl2hex(__assign(__assign({}, hex2hsl(color)), { l: lightness || hsl.l, s: saturation || hsl.s }))); | ||
const step = 360 / size; | ||
output.push(hsl2hex({ ...hsl, l: lightness || hsl.l, s: saturation || hsl.s })); | ||
for (let index = 1; index < size; index++) { | ||
const color = rotate(input, hsl.h + step * index); | ||
output.push(hsl2hex({ ...hex2hsl(color), l: lightness || hsl.l, s: saturation || hsl.s })); | ||
} | ||
@@ -40,0 +28,0 @@ break; |
@@ -5,6 +5,7 @@ import hex2hsl from './hex2hsl'; | ||
import hsl2rgb from './hsl2rgb'; | ||
import isValidHex from './is-valid-hex'; | ||
import { cssColors } from './modules/css-colors'; | ||
import { invariant, isString, messages } from './modules/utils'; | ||
import rgb2hex from './rgb2hex'; | ||
import rgb2hsl from './rgb2hsl'; | ||
import { cssColors, invariant, isString, messages } from './utils'; | ||
import isValidHex from './is-valid-hex'; | ||
/** | ||
@@ -14,5 +15,5 @@ * Parse CSS color | ||
export default function parseCSS(input, output) { | ||
invariant(!isString(input), messages.inputString); | ||
var result; | ||
var parsedInput = cssColors[input.toLowerCase()] || input; | ||
invariant(isString(input), messages.inputString); | ||
let result; | ||
const parsedInput = cssColors[input.toLowerCase()] || input; | ||
if (isValidHex(parsedInput)) { | ||
@@ -36,8 +37,9 @@ switch (output) { | ||
// TODO: improve the pattern to require 3 groups | ||
var matches = parsedInput.match(/(hsl|rgb)a?\((\d+)(?:,\s*|\s+)(\d+)%?(?:,\s*|\s+)(\d+)%?[^)]*\)/i); | ||
invariant(!matches || matches.length !== 5, 'invalid CSS string'); | ||
var _a = matches, model = _a[1], hORr = _a[2], sORg = _a[3], lORb = _a[4]; | ||
var hex = void 0; | ||
var hsl = void 0; | ||
var rgb = void 0; | ||
const matches = parsedInput.match(/(hsl|rgb)a?\((\d+)(?:,\s*|\s+)(\d+)%?(?:,\s*|\s+)(\d+)%?[^)]*\)/i); | ||
invariant(Array.isArray(matches), 'invalid CSS string'); | ||
invariant(matches.length === 5, 'invalid CSS string'); | ||
const [, model, hORr, sORg, lORb] = matches; | ||
let hex; | ||
let hsl; | ||
let rgb; | ||
if (model === 'hsl') { | ||
@@ -44,0 +46,0 @@ hsl = { |
@@ -6,3 +6,3 @@ import hsl2hex from './hsl2hex'; | ||
export default function random() { | ||
var hsl = { | ||
const hsl = { | ||
h: Math.floor(Math.random() * 360) + 1, | ||
@@ -9,0 +9,0 @@ s: Math.floor(Math.random() * 90) + 10, |
import { RGB, RGBArray } from './types'; | ||
/** | ||
* Convert a RGA object to hex. | ||
* Convert an RGA object to hex. | ||
*/ | ||
export default function rgb2hex(input: RGB | RGBArray): string; |
@@ -1,20 +0,20 @@ | ||
import { invariant, isRGB, isRGBArray, messages } from './utils'; | ||
import { invariant, isRGB, isRGBArray, messages } from './modules/utils'; | ||
/** | ||
* Convert a RGA object to hex. | ||
* Convert an RGA object to hex. | ||
*/ | ||
export default function rgb2hex(input) { | ||
invariant(!input, messages.input); | ||
invariant(!isRGBArray(input) && !isRGB(input), messages.invalid); | ||
var r; | ||
var g; | ||
var b; | ||
invariant(!!input, messages.input); | ||
invariant(isRGBArray(input) || isRGB(input), messages.invalid); | ||
let r; | ||
let g; | ||
let b; | ||
if (isRGBArray(input)) { | ||
r = input[0], g = input[1], b = input[2]; | ||
[r, g, b] = input; | ||
} | ||
else { | ||
(r = input.r, g = input.g, b = input.b); | ||
({ r, g, b } = input); | ||
} | ||
var output = [r.toString(16), g.toString(16), b.toString(16)]; | ||
return "#" + output.map(function (d) { return (d.length === 1 ? "0" + d : d); }).join(''); | ||
const output = [r.toString(16), g.toString(16), b.toString(16)]; | ||
return `#${output.map(d => (d.length === 1 ? `0${d}` : d)).join('')}`; | ||
} | ||
//# sourceMappingURL=rgb2hex.js.map |
@@ -1,2 +0,2 @@ | ||
import { RGB, HSL, RGBArray } from './types'; | ||
import { HSL, RGB, RGBArray } from './types'; | ||
export default function rgb2hsl(input: RGB | RGBArray): HSL; |
@@ -1,19 +0,19 @@ | ||
import { invariant, isRGB, limit, messages } from './utils'; | ||
import { invariant, isRGB, limit, messages } from './modules/utils'; | ||
export default function rgb2hsl(input) { | ||
invariant(!input, messages.input); | ||
var rgb = input; | ||
invariant(!!input, messages.input); | ||
let rgb = input; | ||
if (Array.isArray(input)) { | ||
rgb = { r: input[0], g: input[1], b: input[2] }; | ||
} | ||
invariant(!isRGB(rgb), messages.invalid); | ||
var rLimit = limit(rgb.r, 'r') / 255; | ||
var gLimit = limit(rgb.g, 'g') / 255; | ||
var bLimit = limit(rgb.b, 'b') / 255; | ||
var min = Math.min(rLimit, gLimit, bLimit); | ||
var max = Math.max(rLimit, gLimit, bLimit); | ||
var delta = max - min; | ||
var h = 0; | ||
var s; | ||
var l = (max + min) / 2; | ||
var rate; | ||
invariant(isRGB(rgb), messages.invalid); | ||
const rLimit = limit(rgb.r, 'r') / 255; | ||
const gLimit = limit(rgb.g, 'g') / 255; | ||
const bLimit = limit(rgb.b, 'b') / 255; | ||
const min = Math.min(rLimit, gLimit, bLimit); | ||
const max = Math.max(rLimit, gLimit, bLimit); | ||
const delta = max - min; | ||
let h = 0; | ||
let s; | ||
const l = (max + min) / 2; | ||
let rate; | ||
switch (max) { | ||
@@ -20,0 +20,0 @@ case rLimit: |
import hex2hsl from './hex2hsl'; | ||
import { constrainDegrees, invariant, isNumber, isString, messages } from './modules/utils'; | ||
import parseCSS from './parse-css'; | ||
import { shift } from './shift'; | ||
import { constrainDegrees, invariant, isNumber, isString, messages } from './utils'; | ||
/** | ||
* Change the color hue | ||
*/ | ||
export default function rotate(input, degrees) { | ||
if (degrees === void 0) { degrees = 15; } | ||
invariant(!isString(input), messages.inputString); | ||
invariant(!isNumber(degrees), 'degrees must be a number'); | ||
var hex = parseCSS(input); | ||
var h = hex2hsl(hex).h; | ||
export default function rotate(input, degrees = 15) { | ||
invariant(isString(input), messages.inputString); | ||
invariant(isNumber(degrees), 'degrees must be a number'); | ||
const hex = parseCSS(input); | ||
const { h } = hex2hsl(hex); | ||
return shift(hex, { | ||
@@ -15,0 +14,0 @@ h: constrainDegrees(h, degrees), |
@@ -1,9 +0,8 @@ | ||
import updater from './updater'; | ||
import updater from './modules/updater'; | ||
/** | ||
* Increase color saturation | ||
*/ | ||
export default function saturate(input, amount) { | ||
if (amount === void 0) { amount = 10; } | ||
export default function saturate(input, amount = 10) { | ||
return updater('s', '+')(input, amount); | ||
} | ||
//# sourceMappingURL=saturate.js.map |
import { Scheme } from './types'; | ||
/** | ||
* Get the scheme scheme for a color. | ||
* Get the scheme for a color. | ||
*/ | ||
export default function scheme(input: string, type?: Scheme): string[]; |
@@ -0,22 +1,18 @@ | ||
import { invariant, isString, messages } from './modules/utils'; | ||
import parseCSS from './parse-css'; | ||
import rotate from './rotate'; | ||
import { invariant, isString, messages } from './utils'; | ||
/** | ||
* Get the scheme scheme for a color. | ||
* Get the scheme for a color. | ||
*/ | ||
export default function scheme(input, type) { | ||
if (type === void 0) { type = 'complementary'; } | ||
invariant(!isString(input), messages.inputString); | ||
var hex = parseCSS(input); | ||
var output = []; | ||
export default function scheme(input, type = 'complementary') { | ||
invariant(isString(input), messages.inputString); | ||
const hex = parseCSS(input); | ||
const output = []; | ||
switch (type) { | ||
case 'analogous': { | ||
output.push(rotate(hex, -30)); | ||
output.push(hex); | ||
output.push(rotate(hex, 30)); | ||
output.push(rotate(hex, -30), hex, rotate(hex, 30)); | ||
break; | ||
} | ||
case 'complementary': { | ||
output.push(hex); | ||
output.push(rotate(hex, 180)); | ||
output.push(hex, rotate(hex, 180)); | ||
break; | ||
@@ -26,11 +22,7 @@ } | ||
case 'split-complementary': { | ||
output.push(hex); | ||
output.push(rotate(hex, 150)); | ||
output.push(rotate(hex, 210)); | ||
output.push(hex, rotate(hex, 150), rotate(hex, 210)); | ||
break; | ||
} | ||
case 'triadic': { | ||
output.push(hex); | ||
output.push(rotate(hex, 120)); | ||
output.push(rotate(hex, 240)); | ||
output.push(hex, rotate(hex, 120), rotate(hex, 240)); | ||
break; | ||
@@ -40,13 +32,7 @@ } | ||
case 'rectangle': { | ||
output.push(hex); | ||
output.push(rotate(hex, 60)); | ||
output.push(rotate(hex, 180)); | ||
output.push(rotate(hex, 240)); | ||
output.push(hex, rotate(hex, 60), rotate(hex, 180), rotate(hex, 240)); | ||
break; | ||
} | ||
case 'square': { | ||
output.push(hex); | ||
output.push(rotate(hex, 90)); | ||
output.push(rotate(hex, 180)); | ||
output.push(rotate(hex, 270)); | ||
output.push(hex, rotate(hex, 90), rotate(hex, 180), rotate(hex, 270)); | ||
break; | ||
@@ -53,0 +39,0 @@ } |
@@ -1,16 +0,5 @@ | ||
var __assign = (this && this.__assign) || function () { | ||
__assign = Object.assign || function(t) { | ||
for (var s, i = 1, n = arguments.length; i < n; i++) { | ||
s = arguments[i]; | ||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) | ||
t[p] = s[p]; | ||
} | ||
return t; | ||
}; | ||
return __assign.apply(this, arguments); | ||
}; | ||
import hex2hsl from './hex2hsl'; | ||
import hsl2hex from './hsl2hex'; | ||
import hex2hsl from './hex2hsl'; | ||
import { HSLKeys, invariant, isPlainObject, isString, messages, pick } from './modules/utils'; | ||
import parseCSS from './parse-css'; | ||
import { HSLKeys, invariant, isPlainObject, isString, messages, pick } from './utils'; | ||
/** | ||
@@ -20,6 +9,6 @@ * Shift color properties | ||
export function shift(input, options) { | ||
invariant(!isString(input), messages.inputString); | ||
invariant(!isPlainObject(options), messages.options); | ||
return hsl2hex(__assign(__assign({}, hex2hsl(parseCSS(input))), pick(options, HSLKeys))); | ||
invariant(isString(input), messages.inputString); | ||
invariant(isPlainObject(options), messages.options); | ||
return hsl2hex({ ...hex2hsl(parseCSS(input)), ...pick(options, HSLKeys) }); | ||
} | ||
//# sourceMappingURL=shift.js.map |
import hex2rgb from './hex2rgb'; | ||
import { invariant, isString, messages } from './modules/utils'; | ||
import parseCSS from './parse-css'; | ||
import { invariant, isString, messages } from './utils'; | ||
/** | ||
@@ -8,7 +8,7 @@ * Get the contrasted color for a given hex. | ||
export default function textColor(input) { | ||
invariant(!isString(input), messages.inputString); | ||
var _a = hex2rgb(parseCSS(input)), r = _a.r, g = _a.g, b = _a.b; | ||
var yiq = (r * 299 + g * 587 + b * 114) / 1000; | ||
invariant(isString(input), messages.inputString); | ||
const { r, g, b } = hex2rgb(parseCSS(input)); | ||
const yiq = (r * 299 + g * 587 + b * 114) / 1000; | ||
return yiq >= 128 ? '#000000' : '#ffffff'; | ||
} | ||
//# sourceMappingURL=text-color.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var hex2rgb_1 = require("./hex2rgb"); | ||
var parse_css_1 = require("./parse-css"); | ||
var utils_1 = require("./utils"); | ||
const hex2rgb_1 = require("./hex2rgb"); | ||
const utils_1 = require("./modules/utils"); | ||
const parse_css_1 = require("./parse-css"); | ||
/** | ||
@@ -10,11 +10,11 @@ * Get the brightness difference between 2 colors. | ||
function brightnessDifference(left, right) { | ||
utils_1.invariant(!utils_1.isString(left), utils_1.messages.left); | ||
utils_1.invariant(!utils_1.isString(right), utils_1.messages.right); | ||
var RGBLeft = hex2rgb_1.default(parse_css_1.default(left)); | ||
var RGBRight = hex2rgb_1.default(parse_css_1.default(right)); | ||
var rightY = (RGBRight.r * 299 + RGBRight.g * 587 + RGBRight.b * 114) / 1000; | ||
var leftY = (RGBLeft.r * 299 + RGBLeft.g * 587 + RGBLeft.b * 114) / 1000; | ||
return utils_1.round(Math.abs(rightY - leftY), 4); | ||
(0, utils_1.invariant)((0, utils_1.isString)(left), utils_1.messages.left); | ||
(0, utils_1.invariant)((0, utils_1.isString)(right), utils_1.messages.right); | ||
const RGBLeft = (0, hex2rgb_1.default)((0, parse_css_1.default)(left)); | ||
const RGBRight = (0, hex2rgb_1.default)((0, parse_css_1.default)(right)); | ||
const rightY = (RGBRight.r * 299 + RGBRight.g * 587 + RGBRight.b * 114) / 1000; | ||
const leftY = (RGBLeft.r * 299 + RGBLeft.g * 587 + RGBLeft.b * 114) / 1000; | ||
return (0, utils_1.round)(Math.abs(rightY - leftY), 4); | ||
} | ||
exports.default = brightnessDifference; | ||
//# sourceMappingURL=brightness-difference.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var hex2rgb_1 = require("./hex2rgb"); | ||
var parse_css_1 = require("./parse-css"); | ||
var utils_1 = require("./utils"); | ||
const hex2rgb_1 = require("./hex2rgb"); | ||
const utils_1 = require("./modules/utils"); | ||
const parse_css_1 = require("./parse-css"); | ||
/** | ||
@@ -10,9 +10,9 @@ * Get the chroma of a color. | ||
function chroma(input) { | ||
utils_1.invariant(!utils_1.isString(input), utils_1.messages.inputString); | ||
var _a = hex2rgb_1.default(parse_css_1.default(input)), r = _a.r, g = _a.g, b = _a.b; | ||
var max = Math.max(r, g, b); | ||
var min = Math.min(r, g, b); | ||
return utils_1.round((max - min) / 255, 4); | ||
(0, utils_1.invariant)((0, utils_1.isString)(input), utils_1.messages.inputString); | ||
const { r, g, b } = (0, hex2rgb_1.default)((0, parse_css_1.default)(input)); | ||
const max = Math.max(r, g, b); | ||
const min = Math.min(r, g, b); | ||
return (0, utils_1.round)((max - min) / 255, 4); | ||
} | ||
exports.default = chroma; | ||
//# sourceMappingURL=chroma.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var hex2rgb_1 = require("./hex2rgb"); | ||
var parse_css_1 = require("./parse-css"); | ||
var utils_1 = require("./utils"); | ||
const hex2rgb_1 = require("./hex2rgb"); | ||
const utils_1 = require("./modules/utils"); | ||
const parse_css_1 = require("./parse-css"); | ||
/** | ||
@@ -10,6 +10,6 @@ * Get the difference between 2 colors. | ||
function colorDifference(left, right) { | ||
utils_1.invariant(!utils_1.isString(left), utils_1.messages.left); | ||
utils_1.invariant(!utils_1.isString(right), utils_1.messages.right); | ||
var RGBLeft = hex2rgb_1.default(parse_css_1.default(left)); | ||
var RGBRight = hex2rgb_1.default(parse_css_1.default(right)); | ||
(0, utils_1.invariant)((0, utils_1.isString)(left), utils_1.messages.left); | ||
(0, utils_1.invariant)((0, utils_1.isString)(right), utils_1.messages.right); | ||
const RGBLeft = (0, hex2rgb_1.default)((0, parse_css_1.default)(left)); | ||
const RGBRight = (0, hex2rgb_1.default)((0, parse_css_1.default)(right)); | ||
return (Math.max(RGBLeft.r, RGBRight.r) - | ||
@@ -16,0 +16,0 @@ Math.min(RGBLeft.r, RGBRight.r) + |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var brightness_difference_1 = require("./brightness-difference"); | ||
var color_difference_1 = require("./color-difference"); | ||
var contrast_1 = require("./contrast"); | ||
var utils_1 = require("./utils"); | ||
const brightness_difference_1 = require("./brightness-difference"); | ||
const color_difference_1 = require("./color-difference"); | ||
const contrast_1 = require("./contrast"); | ||
const utils_1 = require("./modules/utils"); | ||
/** | ||
@@ -11,12 +11,12 @@ * Check 2 colors for WCAG compliance. | ||
function compare(left, right) { | ||
utils_1.invariant(!utils_1.isString(left), utils_1.messages.left); | ||
utils_1.invariant(!utils_1.isString(right), utils_1.messages.right); | ||
var colorThreshold = 500; | ||
var brightnessThreshold = 125; | ||
var colorDifference = color_difference_1.default(left, right); | ||
var contrast = contrast_1.default(left, right); | ||
var brightnessDifference = brightness_difference_1.default(left, right); | ||
var isBright = brightnessDifference >= brightnessThreshold; | ||
var hasEnoughDifference = colorDifference >= colorThreshold; | ||
var compliant = 0; | ||
(0, utils_1.invariant)((0, utils_1.isString)(left), utils_1.messages.left); | ||
(0, utils_1.invariant)((0, utils_1.isString)(right), utils_1.messages.right); | ||
const colorThreshold = 500; | ||
const brightnessThreshold = 125; | ||
const colorDifference = (0, color_difference_1.default)(left, right); | ||
const contrast = (0, contrast_1.default)(left, right); | ||
const brightnessDifference = (0, brightness_difference_1.default)(left, right); | ||
const isBright = brightnessDifference >= brightnessThreshold; | ||
const hasEnoughDifference = colorDifference >= colorThreshold; | ||
let compliant = 0; | ||
if (isBright && hasEnoughDifference) { | ||
@@ -29,6 +29,6 @@ compliant = 2; | ||
return { | ||
brightnessDifference: brightnessDifference, | ||
colorDifference: colorDifference, | ||
compliant: compliant, | ||
contrast: contrast, | ||
brightnessDifference, | ||
colorDifference, | ||
compliant, | ||
contrast, | ||
largeAA: contrast >= 3, | ||
@@ -35,0 +35,0 @@ largeAAA: contrast >= 4.5, |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var luminance_1 = require("./luminance"); | ||
var parse_css_1 = require("./parse-css"); | ||
var utils_1 = require("./utils"); | ||
const luminance_1 = require("./luminance"); | ||
const utils_1 = require("./modules/utils"); | ||
const parse_css_1 = require("./parse-css"); | ||
/** | ||
@@ -10,16 +10,11 @@ * Get the color contrast between 2 colors. | ||
function contrast(left, right) { | ||
utils_1.invariant(!utils_1.isString(left), utils_1.messages.left); | ||
utils_1.invariant(!utils_1.isString(right), utils_1.messages.right); | ||
var LuminanceLeft = luminance_1.default(parse_css_1.default(left)); | ||
var LuminanceRight = luminance_1.default(parse_css_1.default(right)); | ||
var output; | ||
if (LuminanceLeft >= LuminanceRight) { | ||
output = (LuminanceLeft + 0.05) / (LuminanceRight + 0.05); | ||
} | ||
else { | ||
output = (LuminanceRight + 0.05) / (LuminanceLeft + 0.05); | ||
} | ||
return utils_1.round(output); | ||
(0, utils_1.invariant)((0, utils_1.isString)(left), utils_1.messages.left); | ||
(0, utils_1.invariant)((0, utils_1.isString)(right), utils_1.messages.right); | ||
const LuminanceLeft = (0, luminance_1.default)((0, parse_css_1.default)(left)); | ||
const LuminanceRight = (0, luminance_1.default)((0, parse_css_1.default)(right)); | ||
return (0, utils_1.round)(LuminanceLeft >= LuminanceRight | ||
? (LuminanceLeft + 0.05) / (LuminanceRight + 0.05) | ||
: (LuminanceRight + 0.05) / (LuminanceLeft + 0.05)); | ||
} | ||
exports.default = contrast; | ||
//# sourceMappingURL=contrast.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var updater_1 = require("./updater"); | ||
const updater_1 = require("./modules/updater"); | ||
/** | ||
* Decrease color lightness | ||
*/ | ||
function darken(input, amount) { | ||
if (amount === void 0) { amount = 10; } | ||
return updater_1.default('l', '-')(input, amount); | ||
function darken(input, amount = 10) { | ||
return (0, updater_1.default)('l', '-')(input, amount); | ||
} | ||
exports.default = darken; | ||
//# sourceMappingURL=darken.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var updater_1 = require("./updater"); | ||
const updater_1 = require("./modules/updater"); | ||
/** | ||
* Decrease color saturation | ||
*/ | ||
function desaturate(input, amount) { | ||
if (amount === void 0) { amount = 10; } | ||
return updater_1.default('s', '-')(input, amount); | ||
function desaturate(input, amount = 10) { | ||
return (0, updater_1.default)('s', '-')(input, amount); | ||
} | ||
exports.default = desaturate; | ||
//# sourceMappingURL=desaturate.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var hex2rgb_1 = require("./hex2rgb"); | ||
var parse_css_1 = require("./parse-css"); | ||
var hex2hsl_1 = require("./hex2hsl"); | ||
var utils_1 = require("./utils"); | ||
const hex2hsl_1 = require("./hex2hsl"); | ||
const hex2rgb_1 = require("./hex2rgb"); | ||
const utils_1 = require("./modules/utils"); | ||
const parse_css_1 = require("./parse-css"); | ||
/** | ||
* Fade the color | ||
*/ | ||
function fade(input, amount, output) { | ||
if (amount === void 0) { amount = 10; } | ||
if (output === void 0) { output = 'rgb'; } | ||
utils_1.invariant(!utils_1.isString(input), utils_1.messages.inputString); | ||
utils_1.invariant(!utils_1.isNumber(amount), utils_1.messages.amount); | ||
var hex = parse_css_1.default(input); | ||
var percentage = (100 - amount) / 100; | ||
function fade(input, amount = 10, output = 'rgb') { | ||
(0, utils_1.invariant)((0, utils_1.isString)(input), utils_1.messages.inputString); | ||
(0, utils_1.invariant)((0, utils_1.isNumber)(amount), utils_1.messages.amount); | ||
const hex = (0, parse_css_1.default)(input); | ||
const percentage = (100 - amount) / 100; | ||
if (output === 'rgb') { | ||
var _a = hex2rgb_1.default(hex), r = _a.r, g = _a.g, b = _a.b; | ||
return "rgba(" + r + ", " + g + ", " + b + ", " + percentage + ")"; | ||
const { r, g, b } = (0, hex2rgb_1.default)(hex); | ||
return `rgba(${r}, ${g}, ${b}, ${percentage})`; | ||
} | ||
if (output === 'hsl') { | ||
var _b = hex2hsl_1.default(hex), h = _b.h, s = _b.s, l = _b.l; | ||
return "hsla(" + h + ", " + s + "%, " + l + "%, " + percentage + ")"; | ||
const { h, s, l } = (0, hex2hsl_1.default)(hex); | ||
return `hsla(${h}, ${s}%, ${l}%, ${percentage})`; | ||
} | ||
return "" + hex + Math.round(percentage * 255).toString(16); | ||
return `${hex}${Math.round(percentage * 255).toString(16)}`; | ||
} | ||
exports.default = fade; | ||
//# sourceMappingURL=fade.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var rgb2hsl_1 = require("./rgb2hsl"); | ||
var utils_1 = require("./utils"); | ||
var hsl2rgb_1 = require("./hsl2rgb"); | ||
function formatCSS(input, options) { | ||
if (options === void 0) { options = {}; } | ||
utils_1.invariant(!utils_1.isPlainObject(input) || (!utils_1.isRGB(input) && !utils_1.isHSL(input)), utils_1.messages.invalid); | ||
var alpha = options.alpha, _a = options.model, model = _a === void 0 ? utils_1.isRGB(input) ? 'rgb' : 'hsl' : _a; | ||
var prefix = "" + model + (utils_1.isNumber(alpha) ? 'a' : ''); | ||
var color = input; | ||
var params = []; | ||
const hsl2rgb_1 = require("./hsl2rgb"); | ||
const utils_1 = require("./modules/utils"); | ||
const rgb2hsl_1 = require("./rgb2hsl"); | ||
function formatCSS(input, options = {}) { | ||
(0, utils_1.invariant)((0, utils_1.isPlainObject)(input) && ((0, utils_1.isRGB)(input) || (0, utils_1.isHSL)(input)), utils_1.messages.invalid); | ||
const { alpha, model = (0, utils_1.isRGB)(input) ? 'rgb' : 'hsl' } = options; | ||
const prefix = `${model}${(0, utils_1.isNumber)(alpha) ? 'a' : ''}`; | ||
let color = input; | ||
let params = []; | ||
if (model === 'rgb') { | ||
if (utils_1.isHSL(color)) { | ||
color = hsl2rgb_1.default(color); | ||
if ((0, utils_1.isHSL)(color)) { | ||
color = (0, hsl2rgb_1.default)(color); | ||
} | ||
@@ -20,13 +19,13 @@ params = [Math.round(color.r), Math.round(color.g), Math.round(color.b)]; | ||
else { | ||
if (utils_1.isRGB(color)) { | ||
color = rgb2hsl_1.default(color); | ||
if ((0, utils_1.isRGB)(color)) { | ||
color = (0, rgb2hsl_1.default)(color); | ||
} | ||
params = [Math.round(color.h), Math.round(color.s) + "%", Math.round(color.l) + "%"]; | ||
params = [Math.round(color.h), `${Math.round(color.s)}%`, `${Math.round(color.l)}%`]; | ||
} | ||
if (utils_1.isNumber(alpha)) { | ||
if ((0, utils_1.isNumber)(alpha)) { | ||
params.push(alpha); | ||
} | ||
return prefix + "(" + params.join(', ') + ")"; | ||
return `${prefix}(${params.join(', ')})`; | ||
} | ||
exports.default = formatCSS; | ||
//# sourceMappingURL=format-css.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var utils_1 = require("./utils"); | ||
var is_valid_hex_1 = require("./is-valid-hex"); | ||
const is_valid_hex_1 = require("./is-valid-hex"); | ||
const utils_1 = require("./modules/utils"); | ||
function formatHex(input) { | ||
utils_1.invariant(!utils_1.isString(input), utils_1.messages.inputString); | ||
var color = input.replace('#', ''); | ||
var hex = color; | ||
(0, utils_1.invariant)((0, utils_1.isString)(input), utils_1.messages.inputString); | ||
const color = input.replace('#', ''); | ||
let hex = color; | ||
if (color.length === 3 || color.length === 4) { | ||
hex = ''; | ||
color.split('').forEach(function (d) { | ||
[...color].forEach(d => { | ||
hex += d + d; | ||
}); | ||
} | ||
hex = "#" + hex; | ||
utils_1.invariant(!is_valid_hex_1.default(hex), 'invalid hex'); | ||
hex = `#${hex}`; | ||
(0, utils_1.invariant)((0, is_valid_hex_1.default)(hex), 'invalid hex'); | ||
return hex; | ||
@@ -18,0 +18,0 @@ } |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var hex2rgb_1 = require("./hex2rgb"); | ||
var rgb2hsl_1 = require("./rgb2hsl"); | ||
var utils_1 = require("./utils"); | ||
const hex2rgb_1 = require("./hex2rgb"); | ||
const utils_1 = require("./modules/utils"); | ||
const rgb2hsl_1 = require("./rgb2hsl"); | ||
function hex2hsl(input) { | ||
utils_1.invariant(!utils_1.isString(input), utils_1.messages.inputString); | ||
return rgb2hsl_1.default(hex2rgb_1.default(input)); | ||
(0, utils_1.invariant)((0, utils_1.isString)(input), utils_1.messages.inputString); | ||
return (0, rgb2hsl_1.default)((0, hex2rgb_1.default)(input)); | ||
} | ||
exports.default = hex2hsl; | ||
//# sourceMappingURL=hex2hsl.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var format_hex_1 = require("./format-hex"); | ||
var utils_1 = require("./utils"); | ||
const format_hex_1 = require("./format-hex"); | ||
const utils_1 = require("./modules/utils"); | ||
function hex2rgb(input) { | ||
utils_1.invariant(!utils_1.isString(input), utils_1.messages.inputString); | ||
var hex = format_hex_1.default(input).substr(1); | ||
(0, utils_1.invariant)((0, utils_1.isString)(input), utils_1.messages.inputString); | ||
const hex = (0, format_hex_1.default)(input).substr(1); | ||
return { | ||
@@ -9,0 +9,0 @@ r: parseInt(String(hex.charAt(0)) + hex.charAt(1), 16), |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var hsl2rgb_1 = require("./hsl2rgb"); | ||
var rgb2hex_1 = require("./rgb2hex"); | ||
var utils_1 = require("./utils"); | ||
const hsl2rgb_1 = require("./hsl2rgb"); | ||
const utils_1 = require("./modules/utils"); | ||
const rgb2hex_1 = require("./rgb2hex"); | ||
/** | ||
@@ -10,6 +10,6 @@ * Convert a HSL object to HEX. | ||
function hsl2hex(input) { | ||
utils_1.invariant(!utils_1.isHSL(input), utils_1.messages.invalid); | ||
return rgb2hex_1.default(hsl2rgb_1.default(input)); | ||
(0, utils_1.invariant)((0, utils_1.isHSL)(input), utils_1.messages.invalid); | ||
return (0, rgb2hex_1.default)((0, hsl2rgb_1.default)(input)); | ||
} | ||
exports.default = hsl2hex; | ||
//# sourceMappingURL=hsl2hex.js.map |
import { HSL, RGB } from './types'; | ||
/** | ||
* Convert a HSL object to RGB. | ||
* Convert an HSL object to RGB. | ||
*/ | ||
export default function hsl2rgb(input: HSL): RGB; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var hue2rgb_1 = require("./hue2rgb"); | ||
var utils_1 = require("./utils"); | ||
const hue2rgb_1 = require("./modules/hue2rgb"); | ||
const utils_1 = require("./modules/utils"); | ||
/** | ||
* Convert a HSL object to RGB. | ||
* Convert an HSL object to RGB. | ||
*/ | ||
function hsl2rgb(input) { | ||
utils_1.invariant(!input, utils_1.messages.inputString); | ||
utils_1.invariant(!utils_1.isHSL(input), 'invalid input'); | ||
var h = utils_1.round(input.h) / 360; | ||
var s = utils_1.round(input.s) / 100; | ||
var l = utils_1.round(input.l) / 100; | ||
var r; | ||
var g; | ||
var b; | ||
var point; | ||
var chroma; | ||
(0, utils_1.invariant)(!!input, utils_1.messages.inputString); | ||
(0, utils_1.invariant)((0, utils_1.isHSL)(input), 'invalid input'); | ||
const h = (0, utils_1.round)(input.h) / 360; | ||
const s = (0, utils_1.round)(input.s) / 100; | ||
const l = (0, utils_1.round)(input.l) / 100; | ||
let r; | ||
let g; | ||
let b; | ||
let point; | ||
let chroma; | ||
if (s === 0) { | ||
@@ -27,5 +27,5 @@ r = l; | ||
point = 2 * l - chroma; | ||
r = hue2rgb_1.default(point, chroma, h + 1 / 3); | ||
g = hue2rgb_1.default(point, chroma, h); | ||
b = hue2rgb_1.default(point, chroma, h - 1 / 3); | ||
r = (0, hue2rgb_1.default)(point, chroma, h + 1 / 3); | ||
g = (0, hue2rgb_1.default)(point, chroma, h); | ||
b = (0, hue2rgb_1.default)(point, chroma, h - 1 / 3); | ||
} | ||
@@ -32,0 +32,0 @@ return { |
@@ -1,12 +0,1 @@ | ||
import chroma from './chroma'; | ||
import compare from './compare'; | ||
import darken from './darken'; | ||
import desaturate from './desaturate'; | ||
import fade from './fade'; | ||
import formatCSS from './format-css'; | ||
import lighten from './lighten'; | ||
import luminance from './luminance'; | ||
import rotate from './rotate'; | ||
import saturate from './saturate'; | ||
import textColor from './text-color'; | ||
import { Analysis, HSL, Options, RGB, RGBArray } from './types'; | ||
@@ -92,6 +81,11 @@ declare class Colorizr { | ||
} | ||
export { chroma, compare, darken, desaturate, fade, formatCSS, lighten, luminance, rotate, saturate, textColor, }; | ||
export { default as brightnessDifference } from './brightness-difference'; | ||
export { default as chroma } from './chroma'; | ||
export { default as colorDifference } from './color-difference'; | ||
export { default as compare } from './compare'; | ||
export { default as contrast } from './contrast'; | ||
export { default as darken } from './darken'; | ||
export { default as desaturate } from './desaturate'; | ||
export { default as fade } from './fade'; | ||
export { default as formatCSS } from './format-css'; | ||
export { default as formatHex } from './format-hex'; | ||
@@ -104,2 +98,4 @@ export { default as hex2hsl } from './hex2hsl'; | ||
export { default as isValidHex } from './is-valid-hex'; | ||
export { default as lighten } from './lighten'; | ||
export { default as luminance } from './luminance'; | ||
export { default as name } from './name'; | ||
@@ -111,4 +107,7 @@ export { default as palette } from './palette'; | ||
export { default as rgb2hsl } from './rgb2hsl'; | ||
export { default as rotate } from './rotate'; | ||
export { default as saturate } from './saturate'; | ||
export { default as scheme } from './scheme'; | ||
export { default as textColor } from './text-color'; | ||
export * from './types'; | ||
export default Colorizr; |
299
lib/index.js
"use strict"; | ||
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { | ||
if (k2 === undefined) k2 = k; | ||
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } }); | ||
var desc = Object.getOwnPropertyDescriptor(m, k); | ||
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { | ||
desc = { enumerable: true, get: function() { return m[k]; } }; | ||
} | ||
Object.defineProperty(o, k2, desc); | ||
}) : (function(o, m, k, k2) { | ||
@@ -13,33 +17,25 @@ if (k2 === undefined) k2 = k; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.scheme = exports.rgb2hsl = exports.rgb2hex = exports.random = exports.parseCSS = exports.palette = exports.name = exports.isValidHex = exports.isValidColor = exports.hsl2rgb = exports.hsl2hex = exports.hex2rgb = exports.hex2hsl = exports.formatHex = exports.contrast = exports.colorDifference = exports.brightnessDifference = exports.textColor = exports.saturate = exports.rotate = exports.luminance = exports.lighten = exports.formatCSS = exports.fade = exports.desaturate = exports.darken = exports.compare = exports.chroma = void 0; | ||
var utils_1 = require("./utils"); | ||
var chroma_1 = require("./chroma"); | ||
exports.chroma = chroma_1.default; | ||
var compare_1 = require("./compare"); | ||
exports.compare = compare_1.default; | ||
var darken_1 = require("./darken"); | ||
exports.darken = darken_1.default; | ||
var desaturate_1 = require("./desaturate"); | ||
exports.desaturate = desaturate_1.default; | ||
var fade_1 = require("./fade"); | ||
exports.fade = fade_1.default; | ||
var format_css_1 = require("./format-css"); | ||
exports.formatCSS = format_css_1.default; | ||
var lighten_1 = require("./lighten"); | ||
exports.lighten = lighten_1.default; | ||
var luminance_1 = require("./luminance"); | ||
exports.luminance = luminance_1.default; | ||
var parse_color_1 = require("./parse-color"); | ||
var rotate_1 = require("./rotate"); | ||
exports.rotate = rotate_1.default; | ||
var saturate_1 = require("./saturate"); | ||
exports.saturate = saturate_1.default; | ||
var text_color_1 = require("./text-color"); | ||
exports.textColor = text_color_1.default; | ||
var Colorizr = /** @class */ (function () { | ||
function Colorizr(color, options) { | ||
if (options === void 0) { options = {}; } | ||
utils_1.invariant(!color, 'color is required'); | ||
var _a = options.model, model = _a === void 0 ? 'rgb' : _a; | ||
var _b = parse_color_1.default(color), hex = _b.hex, hsl = _b.hsl, rgb = _b.rgb; | ||
exports.textColor = exports.scheme = exports.saturate = exports.rotate = exports.rgb2hsl = exports.rgb2hex = exports.random = exports.parseCSS = exports.palette = exports.name = exports.luminance = exports.lighten = exports.isValidHex = exports.isValidColor = exports.hsl2rgb = exports.hsl2hex = exports.hex2rgb = exports.hex2hsl = exports.formatHex = exports.formatCSS = exports.fade = exports.desaturate = exports.darken = exports.contrast = exports.compare = exports.colorDifference = exports.chroma = exports.brightnessDifference = void 0; | ||
const chroma_1 = require("./chroma"); | ||
const compare_1 = require("./compare"); | ||
const darken_1 = require("./darken"); | ||
const desaturate_1 = require("./desaturate"); | ||
const fade_1 = require("./fade"); | ||
const format_css_1 = require("./format-css"); | ||
const lighten_1 = require("./lighten"); | ||
const luminance_1 = require("./luminance"); | ||
const parse_color_1 = require("./modules/parse-color"); | ||
const utils_1 = require("./modules/utils"); | ||
const rotate_1 = require("./rotate"); | ||
const saturate_1 = require("./saturate"); | ||
const text_color_1 = require("./text-color"); | ||
class Colorizr { | ||
hex; | ||
model; | ||
hsl; | ||
rgb; | ||
constructor(color, options = {}) { | ||
(0, utils_1.invariant)(!!color, 'color is required'); | ||
const { model = 'rgb' } = options; | ||
const { hex, hsl, rgb } = (0, parse_color_1.default)(color); | ||
this.model = model; | ||
@@ -50,164 +46,129 @@ this.hex = hex; | ||
} | ||
Object.defineProperty(Colorizr.prototype, "css", { | ||
/** | ||
* Get css string | ||
*/ | ||
get: function () { | ||
return format_css_1.default(this.hsl, { model: this.model }); | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Colorizr.prototype, "red", { | ||
/** | ||
* Get the red value | ||
*/ | ||
get: function () { | ||
return Number(this.rgb.r); | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Colorizr.prototype, "green", { | ||
/** | ||
* Get the green value | ||
*/ | ||
get: function () { | ||
return Number(this.rgb.g); | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Colorizr.prototype, "blue", { | ||
/** | ||
* Get the blue value | ||
*/ | ||
get: function () { | ||
return Number(this.rgb.b); | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Colorizr.prototype, "hue", { | ||
/** | ||
* Get the hue value | ||
*/ | ||
get: function () { | ||
return Number(this.hsl.h); | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Colorizr.prototype, "saturation", { | ||
/** | ||
* Get the saturation value | ||
*/ | ||
get: function () { | ||
return Number(this.hsl.s); | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Colorizr.prototype, "lightness", { | ||
/** | ||
* Get the lightness value | ||
*/ | ||
get: function () { | ||
return Number(this.hsl.l); | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Colorizr.prototype, "luminance", { | ||
/** | ||
* Get the luminance value | ||
*/ | ||
get: function () { | ||
return luminance_1.default(this.hex); | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Colorizr.prototype, "chroma", { | ||
/** | ||
* Get the chroma value | ||
*/ | ||
get: function () { | ||
return chroma_1.default(this.hex); | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Colorizr.prototype, "textColor", { | ||
/** | ||
* Get the contrasted color | ||
*/ | ||
get: function () { | ||
return text_color_1.default(this.hex); | ||
}, | ||
enumerable: false, | ||
configurable: true | ||
}); | ||
/** | ||
* Get css string | ||
*/ | ||
get css() { | ||
return (0, format_css_1.default)(this.hsl, { model: this.model }); | ||
} | ||
/** | ||
* Get the red value | ||
*/ | ||
get red() { | ||
return Number(this.rgb.r); | ||
} | ||
/** | ||
* Get the green value | ||
*/ | ||
get green() { | ||
return Number(this.rgb.g); | ||
} | ||
/** | ||
* Get the blue value | ||
*/ | ||
get blue() { | ||
return Number(this.rgb.b); | ||
} | ||
/** | ||
* Get the hue value | ||
*/ | ||
get hue() { | ||
return Number(this.hsl.h); | ||
} | ||
/** | ||
* Get the saturation value | ||
*/ | ||
get saturation() { | ||
return Number(this.hsl.s); | ||
} | ||
/** | ||
* Get the lightness value | ||
*/ | ||
get lightness() { | ||
return Number(this.hsl.l); | ||
} | ||
/** | ||
* Get the luminance value | ||
*/ | ||
get luminance() { | ||
return (0, luminance_1.default)(this.hex); | ||
} | ||
/** | ||
* Get the chroma value | ||
*/ | ||
get chroma() { | ||
return (0, chroma_1.default)(this.hex); | ||
} | ||
/** | ||
* Get the contrasted color | ||
*/ | ||
get textColor() { | ||
return (0, text_color_1.default)(this.hex); | ||
} | ||
/** | ||
* Test 2 colors for compliance | ||
*/ | ||
Colorizr.prototype.compare = function (input) { | ||
return compare_1.default(this.hex, input); | ||
}; | ||
compare(input) { | ||
return (0, compare_1.default)(this.hex, input); | ||
} | ||
/** | ||
* Increase lightness | ||
*/ | ||
Colorizr.prototype.lighten = function (percentage) { | ||
if (percentage === void 0) { percentage = 10; } | ||
return lighten_1.default(this.hex, percentage); | ||
}; | ||
lighten(percentage = 10) { | ||
return (0, lighten_1.default)(this.hex, percentage); | ||
} | ||
/** | ||
* Decrease lightness | ||
*/ | ||
Colorizr.prototype.darken = function (percentage) { | ||
if (percentage === void 0) { percentage = 10; } | ||
return darken_1.default(this.hex, percentage); | ||
}; | ||
darken(percentage = 10) { | ||
return (0, darken_1.default)(this.hex, percentage); | ||
} | ||
/** | ||
* Increase saturation | ||
*/ | ||
Colorizr.prototype.saturate = function (percentage) { | ||
if (percentage === void 0) { percentage = 10; } | ||
return saturate_1.default(this.hex, percentage); | ||
}; | ||
saturate(percentage = 10) { | ||
return (0, saturate_1.default)(this.hex, percentage); | ||
} | ||
/** | ||
* Decrease saturation | ||
*/ | ||
Colorizr.prototype.desaturate = function (percentage) { | ||
if (percentage === void 0) { percentage = 10; } | ||
return desaturate_1.default(this.hex, percentage); | ||
}; | ||
desaturate(percentage = 10) { | ||
return (0, desaturate_1.default)(this.hex, percentage); | ||
} | ||
/** | ||
* Invert color | ||
*/ | ||
Colorizr.prototype.invert = function () { | ||
return rotate_1.default(this.hex, 180); | ||
}; | ||
invert() { | ||
return (0, rotate_1.default)(this.hex, 180); | ||
} | ||
/** | ||
* Rotate color | ||
*/ | ||
Colorizr.prototype.rotate = function (degrees) { | ||
if (degrees === void 0) { degrees = 15; } | ||
return rotate_1.default(this.hex, degrees); | ||
}; | ||
rotate(degrees = 15) { | ||
return (0, rotate_1.default)(this.hex, degrees); | ||
} | ||
/** | ||
* Fade color | ||
*/ | ||
Colorizr.prototype.fade = function (percentage) { | ||
if (percentage === void 0) { percentage = 10; } | ||
return fade_1.default(this.hex, percentage, this.model); | ||
}; | ||
return Colorizr; | ||
}()); | ||
fade(percentage = 10) { | ||
return (0, fade_1.default)(this.hex, percentage, this.model); | ||
} | ||
} | ||
var brightness_difference_1 = require("./brightness-difference"); | ||
Object.defineProperty(exports, "brightnessDifference", { enumerable: true, get: function () { return brightness_difference_1.default; } }); | ||
var chroma_2 = require("./chroma"); | ||
Object.defineProperty(exports, "chroma", { enumerable: true, get: function () { return chroma_2.default; } }); | ||
var color_difference_1 = require("./color-difference"); | ||
Object.defineProperty(exports, "colorDifference", { enumerable: true, get: function () { return color_difference_1.default; } }); | ||
var compare_2 = require("./compare"); | ||
Object.defineProperty(exports, "compare", { enumerable: true, get: function () { return compare_2.default; } }); | ||
var contrast_1 = require("./contrast"); | ||
Object.defineProperty(exports, "contrast", { enumerable: true, get: function () { return contrast_1.default; } }); | ||
var darken_2 = require("./darken"); | ||
Object.defineProperty(exports, "darken", { enumerable: true, get: function () { return darken_2.default; } }); | ||
var desaturate_2 = require("./desaturate"); | ||
Object.defineProperty(exports, "desaturate", { enumerable: true, get: function () { return desaturate_2.default; } }); | ||
var fade_2 = require("./fade"); | ||
Object.defineProperty(exports, "fade", { enumerable: true, get: function () { return fade_2.default; } }); | ||
var format_css_2 = require("./format-css"); | ||
Object.defineProperty(exports, "formatCSS", { enumerable: true, get: function () { return format_css_2.default; } }); | ||
var format_hex_1 = require("./format-hex"); | ||
@@ -227,2 +188,6 @@ Object.defineProperty(exports, "formatHex", { enumerable: true, get: function () { return format_hex_1.default; } }); | ||
Object.defineProperty(exports, "isValidHex", { enumerable: true, get: function () { return is_valid_hex_1.default; } }); | ||
var lighten_2 = require("./lighten"); | ||
Object.defineProperty(exports, "lighten", { enumerable: true, get: function () { return lighten_2.default; } }); | ||
var luminance_2 = require("./luminance"); | ||
Object.defineProperty(exports, "luminance", { enumerable: true, get: function () { return luminance_2.default; } }); | ||
var name_1 = require("./name"); | ||
@@ -240,6 +205,12 @@ Object.defineProperty(exports, "name", { enumerable: true, get: function () { return name_1.default; } }); | ||
Object.defineProperty(exports, "rgb2hsl", { enumerable: true, get: function () { return rgb2hsl_1.default; } }); | ||
var rotate_2 = require("./rotate"); | ||
Object.defineProperty(exports, "rotate", { enumerable: true, get: function () { return rotate_2.default; } }); | ||
var saturate_2 = require("./saturate"); | ||
Object.defineProperty(exports, "saturate", { enumerable: true, get: function () { return saturate_2.default; } }); | ||
var scheme_1 = require("./scheme"); | ||
Object.defineProperty(exports, "scheme", { enumerable: true, get: function () { return scheme_1.default; } }); | ||
var text_color_2 = require("./text-color"); | ||
Object.defineProperty(exports, "textColor", { enumerable: true, get: function () { return text_color_2.default; } }); | ||
__exportStar(require("./types"), exports); | ||
exports.default = Colorizr; | ||
//# sourceMappingURL=index.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var parse_css_1 = require("./parse-css"); | ||
const parse_css_1 = require("./parse-css"); | ||
function isValidColor(input) { | ||
try { | ||
parse_css_1.default(input); | ||
(0, parse_css_1.default)(input); | ||
return true; | ||
} | ||
catch (error) { | ||
catch { | ||
return false; | ||
@@ -11,0 +11,0 @@ } |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var utils_1 = require("./utils"); | ||
const utils_1 = require("./modules/utils"); | ||
function isValidHex(input) { | ||
if (!utils_1.isString(input)) { | ||
if (!(0, utils_1.isString)(input)) { | ||
return false; | ||
} | ||
return /^#([0-9A-F]{3,4}|[0-9A-F]{6,8})$/i.test(input); | ||
return /^#([\da-f]{3,4}|[\da-f]{6,8})$/i.test(input); | ||
} | ||
exports.default = isValidHex; | ||
//# sourceMappingURL=is-valid-hex.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var updater_1 = require("./updater"); | ||
const updater_1 = require("./modules/updater"); | ||
/** | ||
* Increase color lightness | ||
*/ | ||
function lighten(input, amount) { | ||
if (amount === void 0) { amount = 10; } | ||
return updater_1.default('l', '+')(input, amount); | ||
function lighten(input, amount = 10) { | ||
return (0, updater_1.default)('l', '+')(input, amount); | ||
} | ||
exports.default = lighten; | ||
//# sourceMappingURL=lighten.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var hex2rgb_1 = require("./hex2rgb"); | ||
var parse_css_1 = require("./parse-css"); | ||
var utils_1 = require("./utils"); | ||
const hex2rgb_1 = require("./hex2rgb"); | ||
const utils_1 = require("./modules/utils"); | ||
const parse_css_1 = require("./parse-css"); | ||
/** | ||
@@ -10,16 +10,16 @@ * Get the luminance of a color. | ||
function luminance(input) { | ||
utils_1.invariant(!utils_1.isString(input), utils_1.messages.inputString); | ||
var _a = hex2rgb_1.default(parse_css_1.default(input)), r = _a.r, g = _a.g, b = _a.b; | ||
var rgb = [r / 255, g / 255, b / 255]; | ||
for (var i = 0; i < rgb.length; i++) { | ||
if (rgb[i] <= 0.03928) { | ||
rgb[i] /= 12.92; | ||
(0, utils_1.invariant)((0, utils_1.isString)(input), utils_1.messages.inputString); | ||
const { r, g, b } = (0, hex2rgb_1.default)((0, parse_css_1.default)(input)); | ||
const rgb = [r / 255, g / 255, b / 255]; | ||
for (let index = 0; index < rgb.length; index++) { | ||
if (rgb[index] <= 0.03928) { | ||
rgb[index] /= 12.92; | ||
} | ||
else { | ||
rgb[i] = Math.pow(((rgb[i] + 0.055) / 1.055), 2.4); | ||
rgb[index] = ((rgb[index] + 0.055) / 1.055) ** 2.4; | ||
} | ||
} | ||
return utils_1.round(0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2], 4); | ||
return (0, utils_1.round)(0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2], 4); | ||
} | ||
exports.default = luminance; | ||
//# sourceMappingURL=luminance.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var utils_1 = require("./utils"); | ||
var parse_css_1 = require("./parse-css"); | ||
const css_colors_1 = require("./modules/css-colors"); | ||
const utils_1 = require("./modules/utils"); | ||
const parse_css_1 = require("./parse-css"); | ||
function name(input) { | ||
utils_1.invariant(!utils_1.isString(input), utils_1.messages.inputString); | ||
var hex = parse_css_1.default(input); | ||
var color = (Object.entries(utils_1.cssColors).find(function (_a) { | ||
var value = _a[1]; | ||
return value === hex; | ||
}) || [])[0]; | ||
(0, utils_1.invariant)((0, utils_1.isString)(input), utils_1.messages.inputString); | ||
const hex = (0, parse_css_1.default)(input); | ||
const [color] = Object.entries(css_colors_1.cssColors).find(([, value]) => value === hex) || []; | ||
return color || hex; | ||
@@ -13,0 +11,0 @@ } |
"use strict"; | ||
var __assign = (this && this.__assign) || function () { | ||
__assign = Object.assign || function(t) { | ||
for (var s, i = 1, n = arguments.length; i < n; i++) { | ||
s = arguments[i]; | ||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) | ||
t[p] = s[p]; | ||
} | ||
return t; | ||
}; | ||
return __assign.apply(this, arguments); | ||
}; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var hex2hsl_1 = require("./hex2hsl"); | ||
var hsl2hex_1 = require("./hsl2hex"); | ||
var parse_css_1 = require("./parse-css"); | ||
var rotate_1 = require("./rotate"); | ||
var utils_1 = require("./utils"); | ||
function palette(input, options) { | ||
if (options === void 0) { options = {}; } | ||
utils_1.invariant(!utils_1.isString(input), utils_1.messages.inputString); | ||
utils_1.invariant(!utils_1.isPlainObject(options), utils_1.messages.options); | ||
var lightness = options.lightness, saturation = options.saturation, _a = options.size, size = _a === void 0 ? 6 : _a, type = options.type; | ||
var hsl = hex2hsl_1.default(parse_css_1.default(input)); | ||
var output = []; | ||
const hex2hsl_1 = require("./hex2hsl"); | ||
const hsl2hex_1 = require("./hsl2hex"); | ||
const utils_1 = require("./modules/utils"); | ||
const parse_css_1 = require("./parse-css"); | ||
const rotate_1 = require("./rotate"); | ||
function palette(input, options = {}) { | ||
(0, utils_1.invariant)((0, utils_1.isString)(input), utils_1.messages.inputString); | ||
(0, utils_1.invariant)((0, utils_1.isPlainObject)(options), utils_1.messages.options); | ||
const { lightness, saturation, size = 6, type } = options; | ||
const hsl = (0, hex2hsl_1.default)((0, parse_css_1.default)(input)); | ||
const output = []; | ||
switch (type) { | ||
case 'monochromatic': { | ||
var step = 80 / size; | ||
for (var i = size; i > 0; i--) { | ||
output.push(hsl2hex_1.default(__assign(__assign({}, hsl), { l: step * i }))); | ||
const step = 80 / size; | ||
for (let index = size; index > 0; index--) { | ||
output.push((0, hsl2hex_1.default)({ ...hsl, l: step * index })); | ||
} | ||
@@ -35,7 +23,7 @@ break; | ||
default: { | ||
var step = 360 / size; | ||
output.push(hsl2hex_1.default(__assign(__assign({}, hsl), { l: lightness || hsl.l, s: saturation || hsl.s }))); | ||
for (var i = 1; i < size; i++) { | ||
var color = rotate_1.default(input, hsl.h + step * i); | ||
output.push(hsl2hex_1.default(__assign(__assign({}, hex2hsl_1.default(color)), { l: lightness || hsl.l, s: saturation || hsl.s }))); | ||
const step = 360 / size; | ||
output.push((0, hsl2hex_1.default)({ ...hsl, l: lightness || hsl.l, s: saturation || hsl.s })); | ||
for (let index = 1; index < size; index++) { | ||
const color = (0, rotate_1.default)(input, hsl.h + step * index); | ||
output.push((0, hsl2hex_1.default)({ ...(0, hex2hsl_1.default)(color), l: lightness || hsl.l, s: saturation || hsl.s })); | ||
} | ||
@@ -42,0 +30,0 @@ break; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var hex2hsl_1 = require("./hex2hsl"); | ||
var hex2rgb_1 = require("./hex2rgb"); | ||
var hsl2hex_1 = require("./hsl2hex"); | ||
var hsl2rgb_1 = require("./hsl2rgb"); | ||
var rgb2hex_1 = require("./rgb2hex"); | ||
var rgb2hsl_1 = require("./rgb2hsl"); | ||
var utils_1 = require("./utils"); | ||
var is_valid_hex_1 = require("./is-valid-hex"); | ||
const hex2hsl_1 = require("./hex2hsl"); | ||
const hex2rgb_1 = require("./hex2rgb"); | ||
const hsl2hex_1 = require("./hsl2hex"); | ||
const hsl2rgb_1 = require("./hsl2rgb"); | ||
const is_valid_hex_1 = require("./is-valid-hex"); | ||
const css_colors_1 = require("./modules/css-colors"); | ||
const utils_1 = require("./modules/utils"); | ||
const rgb2hex_1 = require("./rgb2hex"); | ||
const rgb2hsl_1 = require("./rgb2hsl"); | ||
/** | ||
@@ -15,13 +16,13 @@ * Parse CSS color | ||
function parseCSS(input, output) { | ||
utils_1.invariant(!utils_1.isString(input), utils_1.messages.inputString); | ||
var result; | ||
var parsedInput = utils_1.cssColors[input.toLowerCase()] || input; | ||
if (is_valid_hex_1.default(parsedInput)) { | ||
(0, utils_1.invariant)((0, utils_1.isString)(input), utils_1.messages.inputString); | ||
let result; | ||
const parsedInput = css_colors_1.cssColors[input.toLowerCase()] || input; | ||
if ((0, is_valid_hex_1.default)(parsedInput)) { | ||
switch (output) { | ||
case 'hsl': { | ||
result = hex2hsl_1.default(parsedInput); | ||
result = (0, hex2hsl_1.default)(parsedInput); | ||
break; | ||
} | ||
case 'rgb': { | ||
result = hex2rgb_1.default(parsedInput); | ||
result = (0, hex2rgb_1.default)(parsedInput); | ||
break; | ||
@@ -37,8 +38,9 @@ } | ||
// TODO: improve the pattern to require 3 groups | ||
var matches = parsedInput.match(/(hsl|rgb)a?\((\d+)(?:,\s*|\s+)(\d+)%?(?:,\s*|\s+)(\d+)%?[^)]*\)/i); | ||
utils_1.invariant(!matches || matches.length !== 5, 'invalid CSS string'); | ||
var _a = matches, model = _a[1], hORr = _a[2], sORg = _a[3], lORb = _a[4]; | ||
var hex = void 0; | ||
var hsl = void 0; | ||
var rgb = void 0; | ||
const matches = parsedInput.match(/(hsl|rgb)a?\((\d+)(?:,\s*|\s+)(\d+)%?(?:,\s*|\s+)(\d+)%?[^)]*\)/i); | ||
(0, utils_1.invariant)(Array.isArray(matches), 'invalid CSS string'); | ||
(0, utils_1.invariant)(matches.length === 5, 'invalid CSS string'); | ||
const [, model, hORr, sORg, lORb] = matches; | ||
let hex; | ||
let hsl; | ||
let rgb; | ||
if (model === 'hsl') { | ||
@@ -50,4 +52,4 @@ hsl = { | ||
}; | ||
hex = hsl2hex_1.default(hsl); | ||
rgb = hsl2rgb_1.default(hsl); | ||
hex = (0, hsl2hex_1.default)(hsl); | ||
rgb = (0, hsl2rgb_1.default)(hsl); | ||
} | ||
@@ -60,4 +62,4 @@ else { | ||
}; | ||
hex = rgb2hex_1.default(rgb); | ||
hsl = rgb2hsl_1.default(rgb); | ||
hex = (0, rgb2hex_1.default)(rgb); | ||
hsl = (0, rgb2hsl_1.default)(rgb); | ||
} | ||
@@ -64,0 +66,0 @@ switch (output) { |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var hsl2hex_1 = require("./hsl2hex"); | ||
const hsl2hex_1 = require("./hsl2hex"); | ||
/** | ||
@@ -8,3 +8,3 @@ * Generate a random color. | ||
function random() { | ||
var hsl = { | ||
const hsl = { | ||
h: Math.floor(Math.random() * 360) + 1, | ||
@@ -14,5 +14,5 @@ s: Math.floor(Math.random() * 90) + 10, | ||
}; | ||
return hsl2hex_1.default(hsl); | ||
return (0, hsl2hex_1.default)(hsl); | ||
} | ||
exports.default = random; | ||
//# sourceMappingURL=random.js.map |
import { RGB, RGBArray } from './types'; | ||
/** | ||
* Convert a RGA object to hex. | ||
* Convert an RGA object to hex. | ||
*/ | ||
export default function rgb2hex(input: RGB | RGBArray): string; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var utils_1 = require("./utils"); | ||
const utils_1 = require("./modules/utils"); | ||
/** | ||
* Convert a RGA object to hex. | ||
* Convert an RGA object to hex. | ||
*/ | ||
function rgb2hex(input) { | ||
utils_1.invariant(!input, utils_1.messages.input); | ||
utils_1.invariant(!utils_1.isRGBArray(input) && !utils_1.isRGB(input), utils_1.messages.invalid); | ||
var r; | ||
var g; | ||
var b; | ||
if (utils_1.isRGBArray(input)) { | ||
r = input[0], g = input[1], b = input[2]; | ||
(0, utils_1.invariant)(!!input, utils_1.messages.input); | ||
(0, utils_1.invariant)((0, utils_1.isRGBArray)(input) || (0, utils_1.isRGB)(input), utils_1.messages.invalid); | ||
let r; | ||
let g; | ||
let b; | ||
if ((0, utils_1.isRGBArray)(input)) { | ||
[r, g, b] = input; | ||
} | ||
else { | ||
(r = input.r, g = input.g, b = input.b); | ||
({ r, g, b } = input); | ||
} | ||
var output = [r.toString(16), g.toString(16), b.toString(16)]; | ||
return "#" + output.map(function (d) { return (d.length === 1 ? "0" + d : d); }).join(''); | ||
const output = [r.toString(16), g.toString(16), b.toString(16)]; | ||
return `#${output.map(d => (d.length === 1 ? `0${d}` : d)).join('')}`; | ||
} | ||
exports.default = rgb2hex; | ||
//# sourceMappingURL=rgb2hex.js.map |
@@ -1,2 +0,2 @@ | ||
import { RGB, HSL, RGBArray } from './types'; | ||
import { HSL, RGB, RGBArray } from './types'; | ||
export default function rgb2hsl(input: RGB | RGBArray): HSL; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var utils_1 = require("./utils"); | ||
const utils_1 = require("./modules/utils"); | ||
function rgb2hsl(input) { | ||
utils_1.invariant(!input, utils_1.messages.input); | ||
var rgb = input; | ||
(0, utils_1.invariant)(!!input, utils_1.messages.input); | ||
let rgb = input; | ||
if (Array.isArray(input)) { | ||
rgb = { r: input[0], g: input[1], b: input[2] }; | ||
} | ||
utils_1.invariant(!utils_1.isRGB(rgb), utils_1.messages.invalid); | ||
var rLimit = utils_1.limit(rgb.r, 'r') / 255; | ||
var gLimit = utils_1.limit(rgb.g, 'g') / 255; | ||
var bLimit = utils_1.limit(rgb.b, 'b') / 255; | ||
var min = Math.min(rLimit, gLimit, bLimit); | ||
var max = Math.max(rLimit, gLimit, bLimit); | ||
var delta = max - min; | ||
var h = 0; | ||
var s; | ||
var l = (max + min) / 2; | ||
var rate; | ||
(0, utils_1.invariant)((0, utils_1.isRGB)(rgb), utils_1.messages.invalid); | ||
const rLimit = (0, utils_1.limit)(rgb.r, 'r') / 255; | ||
const gLimit = (0, utils_1.limit)(rgb.g, 'g') / 255; | ||
const bLimit = (0, utils_1.limit)(rgb.b, 'b') / 255; | ||
const min = Math.min(rLimit, gLimit, bLimit); | ||
const max = Math.max(rLimit, gLimit, bLimit); | ||
const delta = max - min; | ||
let h = 0; | ||
let s; | ||
const l = (max + min) / 2; | ||
let rate; | ||
switch (max) { | ||
@@ -22,0 +22,0 @@ case rLimit: |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var hex2hsl_1 = require("./hex2hsl"); | ||
var parse_css_1 = require("./parse-css"); | ||
var shift_1 = require("./shift"); | ||
var utils_1 = require("./utils"); | ||
const hex2hsl_1 = require("./hex2hsl"); | ||
const utils_1 = require("./modules/utils"); | ||
const parse_css_1 = require("./parse-css"); | ||
const shift_1 = require("./shift"); | ||
/** | ||
* Change the color hue | ||
*/ | ||
function rotate(input, degrees) { | ||
if (degrees === void 0) { degrees = 15; } | ||
utils_1.invariant(!utils_1.isString(input), utils_1.messages.inputString); | ||
utils_1.invariant(!utils_1.isNumber(degrees), 'degrees must be a number'); | ||
var hex = parse_css_1.default(input); | ||
var h = hex2hsl_1.default(hex).h; | ||
return shift_1.shift(hex, { | ||
h: utils_1.constrainDegrees(h, degrees), | ||
function rotate(input, degrees = 15) { | ||
(0, utils_1.invariant)((0, utils_1.isString)(input), utils_1.messages.inputString); | ||
(0, utils_1.invariant)((0, utils_1.isNumber)(degrees), 'degrees must be a number'); | ||
const hex = (0, parse_css_1.default)(input); | ||
const { h } = (0, hex2hsl_1.default)(hex); | ||
return (0, shift_1.shift)(hex, { | ||
h: (0, utils_1.constrainDegrees)(h, degrees), | ||
}); | ||
@@ -19,0 +18,0 @@ } |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var updater_1 = require("./updater"); | ||
const updater_1 = require("./modules/updater"); | ||
/** | ||
* Increase color saturation | ||
*/ | ||
function saturate(input, amount) { | ||
if (amount === void 0) { amount = 10; } | ||
return updater_1.default('s', '+')(input, amount); | ||
function saturate(input, amount = 10) { | ||
return (0, updater_1.default)('s', '+')(input, amount); | ||
} | ||
exports.default = saturate; | ||
//# sourceMappingURL=saturate.js.map |
import { Scheme } from './types'; | ||
/** | ||
* Get the scheme scheme for a color. | ||
* Get the scheme for a color. | ||
*/ | ||
export default function scheme(input: string, type?: Scheme): string[]; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var parse_css_1 = require("./parse-css"); | ||
var rotate_1 = require("./rotate"); | ||
var utils_1 = require("./utils"); | ||
const utils_1 = require("./modules/utils"); | ||
const parse_css_1 = require("./parse-css"); | ||
const rotate_1 = require("./rotate"); | ||
/** | ||
* Get the scheme scheme for a color. | ||
* Get the scheme for a color. | ||
*/ | ||
function scheme(input, type) { | ||
if (type === void 0) { type = 'complementary'; } | ||
utils_1.invariant(!utils_1.isString(input), utils_1.messages.inputString); | ||
var hex = parse_css_1.default(input); | ||
var output = []; | ||
function scheme(input, type = 'complementary') { | ||
(0, utils_1.invariant)((0, utils_1.isString)(input), utils_1.messages.inputString); | ||
const hex = (0, parse_css_1.default)(input); | ||
const output = []; | ||
switch (type) { | ||
case 'analogous': { | ||
output.push(rotate_1.default(hex, -30)); | ||
output.push(hex); | ||
output.push(rotate_1.default(hex, 30)); | ||
output.push((0, rotate_1.default)(hex, -30), hex, (0, rotate_1.default)(hex, 30)); | ||
break; | ||
} | ||
case 'complementary': { | ||
output.push(hex); | ||
output.push(rotate_1.default(hex, 180)); | ||
output.push(hex, (0, rotate_1.default)(hex, 180)); | ||
break; | ||
@@ -28,11 +24,7 @@ } | ||
case 'split-complementary': { | ||
output.push(hex); | ||
output.push(rotate_1.default(hex, 150)); | ||
output.push(rotate_1.default(hex, 210)); | ||
output.push(hex, (0, rotate_1.default)(hex, 150), (0, rotate_1.default)(hex, 210)); | ||
break; | ||
} | ||
case 'triadic': { | ||
output.push(hex); | ||
output.push(rotate_1.default(hex, 120)); | ||
output.push(rotate_1.default(hex, 240)); | ||
output.push(hex, (0, rotate_1.default)(hex, 120), (0, rotate_1.default)(hex, 240)); | ||
break; | ||
@@ -42,13 +34,7 @@ } | ||
case 'rectangle': { | ||
output.push(hex); | ||
output.push(rotate_1.default(hex, 60)); | ||
output.push(rotate_1.default(hex, 180)); | ||
output.push(rotate_1.default(hex, 240)); | ||
output.push(hex, (0, rotate_1.default)(hex, 60), (0, rotate_1.default)(hex, 180), (0, rotate_1.default)(hex, 240)); | ||
break; | ||
} | ||
case 'square': { | ||
output.push(hex); | ||
output.push(rotate_1.default(hex, 90)); | ||
output.push(rotate_1.default(hex, 180)); | ||
output.push(rotate_1.default(hex, 270)); | ||
output.push(hex, (0, rotate_1.default)(hex, 90), (0, rotate_1.default)(hex, 180), (0, rotate_1.default)(hex, 270)); | ||
break; | ||
@@ -55,0 +41,0 @@ } |
"use strict"; | ||
var __assign = (this && this.__assign) || function () { | ||
__assign = Object.assign || function(t) { | ||
for (var s, i = 1, n = arguments.length; i < n; i++) { | ||
s = arguments[i]; | ||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) | ||
t[p] = s[p]; | ||
} | ||
return t; | ||
}; | ||
return __assign.apply(this, arguments); | ||
}; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.shift = void 0; | ||
var hsl2hex_1 = require("./hsl2hex"); | ||
var hex2hsl_1 = require("./hex2hsl"); | ||
var parse_css_1 = require("./parse-css"); | ||
var utils_1 = require("./utils"); | ||
const hex2hsl_1 = require("./hex2hsl"); | ||
const hsl2hex_1 = require("./hsl2hex"); | ||
const utils_1 = require("./modules/utils"); | ||
const parse_css_1 = require("./parse-css"); | ||
/** | ||
@@ -23,7 +12,7 @@ * Shift color properties | ||
function shift(input, options) { | ||
utils_1.invariant(!utils_1.isString(input), utils_1.messages.inputString); | ||
utils_1.invariant(!utils_1.isPlainObject(options), utils_1.messages.options); | ||
return hsl2hex_1.default(__assign(__assign({}, hex2hsl_1.default(parse_css_1.default(input))), utils_1.pick(options, utils_1.HSLKeys))); | ||
(0, utils_1.invariant)((0, utils_1.isString)(input), utils_1.messages.inputString); | ||
(0, utils_1.invariant)((0, utils_1.isPlainObject)(options), utils_1.messages.options); | ||
return (0, hsl2hex_1.default)({ ...(0, hex2hsl_1.default)((0, parse_css_1.default)(input)), ...(0, utils_1.pick)(options, utils_1.HSLKeys) }); | ||
} | ||
exports.shift = shift; | ||
//# sourceMappingURL=shift.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var hex2rgb_1 = require("./hex2rgb"); | ||
var parse_css_1 = require("./parse-css"); | ||
var utils_1 = require("./utils"); | ||
const hex2rgb_1 = require("./hex2rgb"); | ||
const utils_1 = require("./modules/utils"); | ||
const parse_css_1 = require("./parse-css"); | ||
/** | ||
@@ -10,5 +10,5 @@ * Get the contrasted color for a given hex. | ||
function textColor(input) { | ||
utils_1.invariant(!utils_1.isString(input), utils_1.messages.inputString); | ||
var _a = hex2rgb_1.default(parse_css_1.default(input)), r = _a.r, g = _a.g, b = _a.b; | ||
var yiq = (r * 299 + g * 587 + b * 114) / 1000; | ||
(0, utils_1.invariant)((0, utils_1.isString)(input), utils_1.messages.inputString); | ||
const { r, g, b } = (0, hex2rgb_1.default)((0, parse_css_1.default)(input)); | ||
const yiq = (r * 299 + g * 587 + b * 114) / 1000; | ||
return yiq >= 128 ? '#000000' : '#ffffff'; | ||
@@ -15,0 +15,0 @@ } |
{ | ||
"name": "colorizr", | ||
"version": "2.0.0", | ||
"version": "2.1.0", | ||
"description": "Manipulate colors like a boss", | ||
@@ -29,27 +29,18 @@ "author": "Gil Barbara <gilbarbara@gmail.com>", | ||
"sideEffects": false, | ||
"dependencies": {}, | ||
"devDependencies": { | ||
"@gilbarbara/tsconfig": "^0.1.0", | ||
"@size-limit/preset-small-lib": "^4.7.0", | ||
"@types/jest": "^26.0.15", | ||
"@types/node": "^14.14.6", | ||
"@typescript-eslint/eslint-plugin": "^4.6.0", | ||
"@typescript-eslint/parser": "^4.6.0", | ||
"eslint": "^7.12.1", | ||
"eslint-config-airbnb-base": "^14.2.0", | ||
"eslint-config-prettier": "^6.15.0", | ||
"eslint-plugin-import": "^2.22.1", | ||
"eslint-plugin-jsx-a11y": "^6.4.1", | ||
"eslint-plugin-prettier": "^3.1.4", | ||
"husky": "^4.3.0", | ||
"is-ci-cli": "^2.1.2", | ||
"jest": "^26.6.1", | ||
"jest-watch-typeahead": "^0.6.1", | ||
"prettier": "^2.1.2", | ||
"repo-tools": "^0.2.0", | ||
"@gilbarbara/eslint-config": "^0.2.6", | ||
"@gilbarbara/prettier-config": "^0.1.0", | ||
"@gilbarbara/tsconfig": "^0.1.1", | ||
"@size-limit/preset-small-lib": "^8.0.0", | ||
"@types/jest": "^28.1.6", | ||
"husky": "^8.0.1", | ||
"is-ci-cli": "^2.2.0", | ||
"jest": "^28.1.3", | ||
"jest-watch-typeahead": "^2.0.0", | ||
"repo-tools": "^0.2.2", | ||
"rimraf": "^3.0.2", | ||
"size-limit": "^4.7.0", | ||
"ts-jest": "^26.4.3", | ||
"ts-node": "^9.0.0", | ||
"typescript": "^4.0.5", | ||
"size-limit": "^8.0.0", | ||
"ts-jest": "^28.0.7", | ||
"ts-node": "^10.9.1", | ||
"typescript": "^4.7.4", | ||
"watch-run": "^1.2.5" | ||
@@ -65,2 +56,3 @@ }, | ||
"lint": "eslint --ext .ts,.tsx src test", | ||
"typecheck": "tsc --noEmit -p test/tsconfig.json", | ||
"test": "is-ci \"test:coverage\" \"test:watch\"", | ||
@@ -70,29 +62,28 @@ "test:coverage": "jest --coverage --bail", | ||
"format": "prettier \"**/*.{js,jsx,json,yml,yaml,css,less,scss,ts,tsx,md,graphql,mdx}\" --write", | ||
"validate": "npm run lint && npm run test:coverage && npm run build && npm run size", | ||
"validate": "npm run lint && npm run typecheck && npm run test:coverage && npm run build && npm run size", | ||
"size": "size-limit", | ||
"prepublishOnly": "npm run validate" | ||
"prepublishOnly": "npm run validate", | ||
"prepare": "husky install" | ||
}, | ||
"prettier": { | ||
"arrowParens": "avoid", | ||
"printWidth": 100, | ||
"proseWrap": "never", | ||
"singleQuote": true, | ||
"trailingComma": "all" | ||
"eslintConfig": { | ||
"extends": [ | ||
"@gilbarbara/eslint-config" | ||
], | ||
"rules": { | ||
"sort-destructure-keys/sort-destructure-keys": "off" | ||
} | ||
}, | ||
"prettier": "@gilbarbara/prettier-config", | ||
"size-limit": [ | ||
{ | ||
"path": "./lib/*.js", | ||
"limit": "7 KB" | ||
"name": "lib", | ||
"path": "./lib/index.js", | ||
"limit": "8 kB" | ||
}, | ||
{ | ||
"path": "./esm/*.js", | ||
"limit": "7 KB" | ||
"name": "esm", | ||
"path": "./esm/index.js", | ||
"limit": "6 kB" | ||
} | ||
], | ||
"husky": { | ||
"hooks": { | ||
"pre-commit": "repo-tools check-remote && npm run validate", | ||
"post-merge": "repo-tools install-packages" | ||
} | ||
} | ||
] | ||
} |
# Colorizr | ||
[![NPM version](https://badge.fury.io/js/colorizr.svg)](https://www.npmjs.com/package/colorizr) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/colorizr)](https://bundlephobia.com/result?p=colorizr) [![build status](https://travis-ci.org/gilbarbara/colorizr.svg)](https://travis-ci.org/gilbarbara/colorizr) [![Maintainability](https://api.codeclimate.com/v1/badges/6d686ce2a9f2a1a47d98/maintainability)](https://codeclimate.com/github/gilbarbara/colorizr/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/6d686ce2a9f2a1a47d98/test_coverage)](https://codeclimate.com/github/gilbarbara/colorizr/test_coverage) | ||
[![NPM version](https://badge.fury.io/js/colorizr.svg)](https://www.npmjs.com/package/colorizr) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/colorizr)](https://bundlephobia.com/result?p=colorizr) [![CI](https://github.com/gilbarbara/colorizr/actions/workflows/main.yml/badge.svg)](https://github.com/gilbarbara/colorizr/actions/workflows/main.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/6d686ce2a9f2a1a47d98/maintainability)](https://codeclimate.com/github/gilbarbara/colorizr/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/6d686ce2a9f2a1a47d98/test_coverage)](https://codeclimate.com/github/gilbarbara/colorizr/test_coverage) | ||
Color conversion, manipulation, comparison and analysis. | ||
Color conversion, manipulation, comparison, and analysis. | ||
@@ -10,4 +10,4 @@ ## Highlights | ||
- 🏖 **Easy to use**: Works with HSL and RGB, including CSS strings | ||
- ♿️ **Acessibility:** WCAG analysis and comparison. | ||
- 🛠 **Small:** Less than 4k (gzipped) and zero dependencies. | ||
- ♿️ **Accessibility:** WCAG analysis and comparison. | ||
- 🛠 **Small:** Less than 6k (gzipped) and zero dependencies. | ||
- 🟦 **Modern:** Written in Typescript. | ||
@@ -139,3 +139,3 @@ | ||
**formatHex(input: string): string** | ||
_format a short hex string 3 (or 4) digits into a 6 (or 8) digits._ | ||
_format a short hex string of 3 (or 4) digits into 6 (or 8) digits._ | ||
@@ -150,3 +150,3 @@ ```typescript | ||
**hex2hsl(input: string): HSL** | ||
_convert a hex string into a HSL object_ | ||
_convert a hex string into an HSL object_ | ||
@@ -160,3 +160,3 @@ ```typescript | ||
**hex2rgb(input: string): RGB** | ||
_convert a hex string into a RGB object_ | ||
_convert a hex string into an RGB object_ | ||
@@ -170,3 +170,3 @@ ```typescript | ||
**hsl2hex(input: HSL): string** | ||
_convert a HSL object into a hex string_ | ||
_convert an HSL object into a hex string_ | ||
@@ -180,3 +180,3 @@ ```typescript | ||
**hsl2rgb(input: HSL): RGB** | ||
_convert a HSL object into a RGB object_ | ||
_convert an HSL object into an RGB object_ | ||
@@ -258,3 +258,3 @@ ```typescript | ||
**parseCSS(input: string, output: ColorTypes = 'hex'): string | HSL | RGB** | ||
_parse a css string to hex, hsl or rgb_ | ||
_parse a css string to hex, hsl, or RGB_ | ||
@@ -278,3 +278,3 @@ ```typescript | ||
**rgb2hex(input: RGB | RGBArray): string** | ||
_convert a RGB object into a hex string_ | ||
_convert an RGB object into a hex string_ | ||
@@ -289,3 +289,3 @@ ```typescript | ||
**rgb2hsl(input: RGB | RGBArray): HSL** | ||
_convert a RGB object into a HSL object_ | ||
_convert an RGB object into an HSL object_ | ||
@@ -313,3 +313,3 @@ ```typescript | ||
saturate('#ff0044', 10); // #ff0044 (alreay at the maximum) | ||
saturate('#ff0044', 10); // #ff0044 (already at the maximum) | ||
saturate('pink', 10); // #ffc0cb | ||
@@ -329,3 +329,3 @@ ``` | ||
**textColor(input: string): string** | ||
_get a constrasted color to use with text_ | ||
_get a contrasting color to use with the text_ | ||
@@ -357,6 +357,6 @@ ```typescript | ||
**colorizr.hsl** | ||
_returns the hsl object_ | ||
_returns the HSL object_ | ||
**colorizr.rgb** | ||
_returns the rgb object_ | ||
_returns the RGB object_ | ||
@@ -363,0 +363,0 @@ **colorizr.hue** |
import hex2rgb from './hex2rgb'; | ||
import { invariant, isString, messages, round } from './modules/utils'; | ||
import parseCSS from './parse-css'; | ||
import { invariant, isString, messages, round } from './utils'; | ||
@@ -9,4 +9,4 @@ /** | ||
export default function brightnessDifference(left: string, right: string): number { | ||
invariant(!isString(left), messages.left); | ||
invariant(!isString(right), messages.right); | ||
invariant(isString(left), messages.left); | ||
invariant(isString(right), messages.right); | ||
@@ -13,0 +13,0 @@ const RGBLeft = hex2rgb(parseCSS(left)); |
import hex2rgb from './hex2rgb'; | ||
import { invariant, isString, messages, round } from './modules/utils'; | ||
import parseCSS from './parse-css'; | ||
import { invariant, isString, messages, round } from './utils'; | ||
@@ -9,3 +9,3 @@ /** | ||
export default function chroma(input: string): number { | ||
invariant(!isString(input), messages.inputString); | ||
invariant(isString(input), messages.inputString); | ||
@@ -12,0 +12,0 @@ const { r, g, b } = hex2rgb(parseCSS(input)); |
import hex2rgb from './hex2rgb'; | ||
import { invariant, isString, messages } from './modules/utils'; | ||
import parseCSS from './parse-css'; | ||
import { invariant, isString, messages } from './utils'; | ||
@@ -9,4 +9,4 @@ /** | ||
export default function colorDifference(left: string, right: string): number { | ||
invariant(!isString(left), messages.left); | ||
invariant(!isString(right), messages.right); | ||
invariant(isString(left), messages.left); | ||
invariant(isString(right), messages.right); | ||
@@ -13,0 +13,0 @@ const RGBLeft = hex2rgb(parseCSS(left)); |
import getBrightnessDifference from './brightness-difference'; | ||
import getColorDifference from './color-difference'; | ||
import getContrast from './contrast'; | ||
import { invariant, isString, messages } from './utils'; | ||
import { invariant, isString, messages } from './modules/utils'; | ||
import { Analysis } from './types'; | ||
@@ -12,4 +11,4 @@ | ||
export default function compare(left: string, right: string): Analysis { | ||
invariant(!isString(left), messages.left); | ||
invariant(!isString(right), messages.right); | ||
invariant(isString(left), messages.left); | ||
invariant(isString(right), messages.right); | ||
@@ -16,0 +15,0 @@ const colorThreshold = 500; |
import getLuminance from './luminance'; | ||
import { invariant, isString, messages, round } from './modules/utils'; | ||
import parseCSS from './parse-css'; | ||
import { invariant, isString, messages, round } from './utils'; | ||
@@ -9,4 +9,4 @@ /** | ||
export default function contrast(left: string, right: string): number { | ||
invariant(!isString(left), messages.left); | ||
invariant(!isString(right), messages.right); | ||
invariant(isString(left), messages.left); | ||
invariant(isString(right), messages.right); | ||
@@ -16,11 +16,7 @@ const LuminanceLeft = getLuminance(parseCSS(left)); | ||
let output; | ||
if (LuminanceLeft >= LuminanceRight) { | ||
output = (LuminanceLeft + 0.05) / (LuminanceRight + 0.05); | ||
} else { | ||
output = (LuminanceRight + 0.05) / (LuminanceLeft + 0.05); | ||
} | ||
return round(output); | ||
return round( | ||
LuminanceLeft >= LuminanceRight | ||
? (LuminanceLeft + 0.05) / (LuminanceRight + 0.05) | ||
: (LuminanceRight + 0.05) / (LuminanceLeft + 0.05), | ||
); | ||
} |
@@ -1,2 +0,2 @@ | ||
import updater from './updater'; | ||
import updater from './modules/updater'; | ||
@@ -3,0 +3,0 @@ /** |
@@ -1,2 +0,2 @@ | ||
import updater from './updater'; | ||
import updater from './modules/updater'; | ||
@@ -3,0 +3,0 @@ /** |
@@ -0,5 +1,5 @@ | ||
import hex2hsl from './hex2hsl'; | ||
import hex2rgb from './hex2rgb'; | ||
import { invariant, isNumber, isString, messages } from './modules/utils'; | ||
import parseCSS from './parse-css'; | ||
import hex2hsl from './hex2hsl'; | ||
import { invariant, isNumber, isString, messages } from './utils'; | ||
import { ColorTypes } from './types'; | ||
@@ -11,4 +11,4 @@ | ||
export default function fade(input: string, amount = 10, output: ColorTypes = 'rgb'): string { | ||
invariant(!isString(input), messages.inputString); | ||
invariant(!isNumber(amount), messages.amount); | ||
invariant(isString(input), messages.inputString); | ||
invariant(isNumber(amount), messages.amount); | ||
@@ -15,0 +15,0 @@ const hex = parseCSS(input); |
@@ -0,8 +1,8 @@ | ||
import hsl2rgb from './hsl2rgb'; | ||
import { invariant, isHSL, isNumber, isPlainObject, isRGB, messages } from './modules/utils'; | ||
import rgb2Hsl from './rgb2hsl'; | ||
import { isRGB, isHSL, isNumber, isPlainObject, invariant, messages } from './utils'; | ||
import { FormatOptions, HSL, RGB } from './types'; | ||
import hsl2rgb from './hsl2rgb'; | ||
export default function formatCSS(input: HSL | RGB, options: FormatOptions = {}): string { | ||
invariant(!isPlainObject(input) || (!isRGB(input) && !isHSL(input)), messages.invalid); | ||
invariant(isPlainObject(input) && (isRGB(input) || isHSL(input)), messages.invalid); | ||
@@ -9,0 +9,0 @@ const { alpha, model = isRGB(input) ? 'rgb' : 'hsl' } = options; |
@@ -1,6 +0,6 @@ | ||
import { invariant, isString, messages } from './utils'; | ||
import isValidHex from './is-valid-hex'; | ||
import { invariant, isString, messages } from './modules/utils'; | ||
export default function formatHex(input: string): string { | ||
invariant(!isString(input), messages.inputString); | ||
invariant(isString(input), messages.inputString); | ||
@@ -13,3 +13,3 @@ const color = input.replace('#', ''); | ||
color.split('').forEach(d => { | ||
[...color].forEach(d => { | ||
hex += d + d; | ||
@@ -21,5 +21,5 @@ }); | ||
invariant(!isValidHex(hex), 'invalid hex'); | ||
invariant(isValidHex(hex), 'invalid hex'); | ||
return hex; | ||
} |
import hex2rgb from './hex2rgb'; | ||
import { invariant, isString, messages } from './modules/utils'; | ||
import rgb2hsl from './rgb2hsl'; | ||
import { invariant, isString, messages } from './utils'; | ||
import { HSL } from './types'; | ||
export default function hex2hsl(input: string): HSL { | ||
invariant(!isString(input), messages.inputString); | ||
invariant(isString(input), messages.inputString); | ||
return rgb2hsl(hex2rgb(input)); | ||
} |
import formatHex from './format-hex'; | ||
import { invariant, isString, messages } from './utils'; | ||
import { invariant, isString, messages } from './modules/utils'; | ||
import { RGB } from './types'; | ||
export default function hex2rgb(input: string): RGB { | ||
invariant(!isString(input), messages.inputString); | ||
invariant(isString(input), messages.inputString); | ||
@@ -9,0 +8,0 @@ const hex = formatHex(input).substr(1); |
import hsl2rgb from './hsl2rgb'; | ||
import { invariant, isHSL, messages } from './modules/utils'; | ||
import rgb2hex from './rgb2hex'; | ||
import { invariant, isHSL, messages } from './utils'; | ||
import { HSL } from './types'; | ||
@@ -11,5 +10,5 @@ | ||
export default function hsl2hex(input: HSL): string { | ||
invariant(!isHSL(input), messages.invalid); | ||
invariant(isHSL(input), messages.invalid); | ||
return rgb2hex(hsl2rgb(input)); | ||
} |
@@ -1,13 +0,12 @@ | ||
import hue2rgb from './hue2rgb'; | ||
import { invariant, isHSL, messages, round } from './utils'; | ||
import hue2rgb from './modules/hue2rgb'; | ||
import { invariant, isHSL, messages, round } from './modules/utils'; | ||
import { HSL, RGB } from './types'; | ||
/** | ||
* Convert a HSL object to RGB. | ||
* Convert an HSL object to RGB. | ||
*/ | ||
export default function hsl2rgb(input: HSL): RGB { | ||
invariant(!input, messages.inputString); | ||
invariant(!!input, messages.inputString); | ||
invariant(!isHSL(input), 'invalid input'); | ||
invariant(isHSL(input), 'invalid input'); | ||
@@ -14,0 +13,0 @@ const h = round(input.h) / 360; |
@@ -1,3 +0,1 @@ | ||
import { invariant } from './utils'; | ||
import chroma from './chroma'; | ||
@@ -11,7 +9,7 @@ import compare from './compare'; | ||
import luminance from './luminance'; | ||
import parseColor from './parse-color'; | ||
import parseColor from './modules/parse-color'; | ||
import { invariant } from './modules/utils'; | ||
import rotate from './rotate'; | ||
import saturate from './saturate'; | ||
import textColor from './text-color'; | ||
import { Analysis, HSL, Options, RGB, RGBArray } from './types'; | ||
@@ -26,3 +24,3 @@ | ||
constructor(color: string | HSL | RGB | RGBArray, options: Options = {}) { | ||
invariant(!color, 'color is required'); | ||
invariant(!!color, 'color is required'); | ||
@@ -165,19 +163,11 @@ const { model = 'rgb' } = options; | ||
export { | ||
chroma, | ||
compare, | ||
darken, | ||
desaturate, | ||
fade, | ||
formatCSS, | ||
lighten, | ||
luminance, | ||
rotate, | ||
saturate, | ||
textColor, | ||
}; | ||
export { default as brightnessDifference } from './brightness-difference'; | ||
export { default as chroma } from './chroma'; | ||
export { default as colorDifference } from './color-difference'; | ||
export { default as compare } from './compare'; | ||
export { default as contrast } from './contrast'; | ||
export { default as darken } from './darken'; | ||
export { default as desaturate } from './desaturate'; | ||
export { default as fade } from './fade'; | ||
export { default as formatCSS } from './format-css'; | ||
export { default as formatHex } from './format-hex'; | ||
@@ -190,2 +180,4 @@ export { default as hex2hsl } from './hex2hsl'; | ||
export { default as isValidHex } from './is-valid-hex'; | ||
export { default as lighten } from './lighten'; | ||
export { default as luminance } from './luminance'; | ||
export { default as name } from './name'; | ||
@@ -197,3 +189,6 @@ export { default as palette } from './palette'; | ||
export { default as rgb2hsl } from './rgb2hsl'; | ||
export { default as rotate } from './rotate'; | ||
export { default as saturate } from './saturate'; | ||
export { default as scheme } from './scheme'; | ||
export { default as textColor } from './text-color'; | ||
@@ -200,0 +195,0 @@ export * from './types'; |
@@ -8,5 +8,5 @@ import parseCSS from './parse-css'; | ||
return true; | ||
} catch (error) { | ||
} catch { | ||
return false; | ||
} | ||
} |
@@ -1,2 +0,2 @@ | ||
import { isString } from './utils'; | ||
import { isString } from './modules/utils'; | ||
@@ -8,3 +8,3 @@ export default function isValidHex(input: any): boolean { | ||
return /^#([0-9A-F]{3,4}|[0-9A-F]{6,8})$/i.test(input); | ||
return /^#([\da-f]{3,4}|[\da-f]{6,8})$/i.test(input); | ||
} |
@@ -1,2 +0,2 @@ | ||
import updater from './updater'; | ||
import updater from './modules/updater'; | ||
@@ -3,0 +3,0 @@ /** |
import hex2rgb from './hex2rgb'; | ||
import { invariant, isString, messages, round } from './modules/utils'; | ||
import parseCSS from './parse-css'; | ||
import { invariant, isString, messages, round } from './utils'; | ||
@@ -9,3 +9,3 @@ /** | ||
export default function luminance(input: string): number { | ||
invariant(!isString(input), messages.inputString); | ||
invariant(isString(input), messages.inputString); | ||
@@ -16,7 +16,7 @@ const { r, g, b } = hex2rgb(parseCSS(input)); | ||
for (let i = 0; i < rgb.length; i++) { | ||
if (rgb[i] <= 0.03928) { | ||
rgb[i] /= 12.92; | ||
for (let index = 0; index < rgb.length; index++) { | ||
if (rgb[index] <= 0.03928) { | ||
rgb[index] /= 12.92; | ||
} else { | ||
rgb[i] = ((rgb[i] + 0.055) / 1.055) ** 2.4; | ||
rgb[index] = ((rgb[index] + 0.055) / 1.055) ** 2.4; | ||
} | ||
@@ -23,0 +23,0 @@ } |
@@ -1,6 +0,7 @@ | ||
import { cssColors, invariant, isString, messages } from './utils'; | ||
import { cssColors } from './modules/css-colors'; | ||
import { invariant, isString, messages } from './modules/utils'; | ||
import parseCSS from './parse-css'; | ||
export default function name(input: string): string { | ||
invariant(!isString(input), messages.inputString); | ||
invariant(isString(input), messages.inputString); | ||
@@ -7,0 +8,0 @@ const hex = parseCSS(input); |
import hex2hsl from './hex2hsl'; | ||
import hsl2hex from './hsl2hex'; | ||
import { invariant, isPlainObject, isString, messages } from './modules/utils'; | ||
import parseCSS from './parse-css'; | ||
import rotate from './rotate'; | ||
import { invariant, isPlainObject, isString, messages } from './utils'; | ||
import { PaletteOptions } from './types'; | ||
export default function palette(input: string, options: PaletteOptions = {}): string[] { | ||
invariant(!isString(input), messages.inputString); | ||
invariant(!isPlainObject(options), messages.options); | ||
invariant(isString(input), messages.inputString); | ||
invariant(isPlainObject(options), messages.options); | ||
@@ -21,4 +20,4 @@ const { lightness, saturation, size = 6, type } = options; | ||
for (let i = size; i > 0; i--) { | ||
output.push(hsl2hex({ ...hsl, l: step * i })); | ||
for (let index = size; index > 0; index--) { | ||
output.push(hsl2hex({ ...hsl, l: step * index })); | ||
} | ||
@@ -30,6 +29,8 @@ | ||
const step = 360 / size; | ||
output.push(hsl2hex({ ...hsl, l: lightness || hsl.l, s: saturation || hsl.s })); | ||
for (let i = 1; i < size; i++) { | ||
const color = rotate(input, hsl.h + step * i); | ||
for (let index = 1; index < size; index++) { | ||
const color = rotate(input, hsl.h + step * index); | ||
output.push(hsl2hex({ ...hex2hsl(color), l: lightness || hsl.l, s: saturation || hsl.s })); | ||
@@ -36,0 +37,0 @@ } |
@@ -5,7 +5,7 @@ import hex2hsl from './hex2hsl'; | ||
import hsl2rgb from './hsl2rgb'; | ||
import isValidHex from './is-valid-hex'; | ||
import { cssColors } from './modules/css-colors'; | ||
import { invariant, isString, messages } from './modules/utils'; | ||
import rgb2hex from './rgb2hex'; | ||
import rgb2hsl from './rgb2hsl'; | ||
import { cssColors, invariant, isString, messages } from './utils'; | ||
import isValidHex from './is-valid-hex'; | ||
import { ColorTypes, Return } from './types'; | ||
@@ -20,3 +20,3 @@ | ||
): Return<T> { | ||
invariant(!isString(input), messages.inputString); | ||
invariant(isString(input), messages.inputString); | ||
let result: any; | ||
@@ -47,5 +47,6 @@ | ||
invariant(!matches || matches.length !== 5, 'invalid CSS string'); | ||
invariant(Array.isArray(matches), 'invalid CSS string'); | ||
invariant(matches.length === 5, 'invalid CSS string'); | ||
const [, model, hORr, sORg, lORb] = matches!; | ||
const [, model, hORr, sORg, lORb] = matches; | ||
let hex; | ||
@@ -82,2 +83,3 @@ let hsl; | ||
} | ||
case 'hex': | ||
@@ -84,0 +86,0 @@ default: { |
@@ -1,11 +0,10 @@ | ||
import { invariant, isRGB, isRGBArray, messages } from './utils'; | ||
import { invariant, isRGB, isRGBArray, messages } from './modules/utils'; | ||
import { RGB, RGBArray } from './types'; | ||
/** | ||
* Convert a RGA object to hex. | ||
* Convert an RGA object to hex. | ||
*/ | ||
export default function rgb2hex(input: RGB | RGBArray): string { | ||
invariant(!input, messages.input); | ||
invariant(!isRGBArray(input) && !isRGB(input), messages.invalid); | ||
invariant(!!input, messages.input); | ||
invariant(isRGBArray(input) || isRGB(input), messages.invalid); | ||
@@ -12,0 +11,0 @@ let r: number; |
@@ -1,7 +0,6 @@ | ||
import { invariant, isRGB, limit, messages } from './utils'; | ||
import { invariant, isRGB, limit, messages } from './modules/utils'; | ||
import { HSL, RGB, RGBArray } from './types'; | ||
import { RGB, HSL, RGBArray } from './types'; | ||
export default function rgb2hsl(input: RGB | RGBArray): HSL { | ||
invariant(!input, messages.input); | ||
invariant(!!input, messages.input); | ||
@@ -14,3 +13,3 @@ let rgb: RGB = input as RGB; | ||
invariant(!isRGB(rgb), messages.invalid); | ||
invariant(isRGB(rgb), messages.invalid); | ||
@@ -17,0 +16,0 @@ const rLimit = limit(rgb.r, 'r') / 255; |
import hex2hsl from './hex2hsl'; | ||
import { constrainDegrees, invariant, isNumber, isString, messages } from './modules/utils'; | ||
import parseCSS from './parse-css'; | ||
import { shift } from './shift'; | ||
import { constrainDegrees, invariant, isNumber, isString, messages } from './utils'; | ||
@@ -10,4 +10,4 @@ /** | ||
export default function rotate(input: string, degrees = 15): string { | ||
invariant(!isString(input), messages.inputString); | ||
invariant(!isNumber(degrees), 'degrees must be a number'); | ||
invariant(isString(input), messages.inputString); | ||
invariant(isNumber(degrees), 'degrees must be a number'); | ||
@@ -14,0 +14,0 @@ const hex = parseCSS(input); |
@@ -1,2 +0,2 @@ | ||
import updater from './updater'; | ||
import updater from './modules/updater'; | ||
@@ -3,0 +3,0 @@ /** |
@@ -0,12 +1,11 @@ | ||
import { invariant, isString, messages } from './modules/utils'; | ||
import parseCSS from './parse-css'; | ||
import rotate from './rotate'; | ||
import { invariant, isString, messages } from './utils'; | ||
import { Scheme } from './types'; | ||
/** | ||
* Get the scheme scheme for a color. | ||
* Get the scheme for a color. | ||
*/ | ||
export default function scheme(input: string, type: Scheme = 'complementary'): string[] { | ||
invariant(!isString(input), messages.inputString); | ||
invariant(isString(input), messages.inputString); | ||
@@ -18,38 +17,27 @@ const hex = parseCSS(input); | ||
case 'analogous': { | ||
output.push(rotate(hex, -30)); | ||
output.push(hex); | ||
output.push(rotate(hex, 30)); | ||
output.push(rotate(hex, -30), hex, rotate(hex, 30)); | ||
break; | ||
} | ||
case 'complementary': { | ||
output.push(hex); | ||
output.push(rotate(hex, 180)); | ||
output.push(hex, rotate(hex, 180)); | ||
break; | ||
} | ||
case 'split': | ||
case 'split-complementary': { | ||
output.push(hex); | ||
output.push(rotate(hex, 150)); | ||
output.push(rotate(hex, 210)); | ||
output.push(hex, rotate(hex, 150), rotate(hex, 210)); | ||
break; | ||
} | ||
case 'triadic': { | ||
output.push(hex); | ||
output.push(rotate(hex, 120)); | ||
output.push(rotate(hex, 240)); | ||
output.push(hex, rotate(hex, 120), rotate(hex, 240)); | ||
break; | ||
} | ||
case 'tetradic': | ||
case 'rectangle': { | ||
output.push(hex); | ||
output.push(rotate(hex, 60)); | ||
output.push(rotate(hex, 180)); | ||
output.push(rotate(hex, 240)); | ||
output.push(hex, rotate(hex, 60), rotate(hex, 180), rotate(hex, 240)); | ||
break; | ||
} | ||
case 'square': { | ||
output.push(hex); | ||
output.push(rotate(hex, 90)); | ||
output.push(rotate(hex, 180)); | ||
output.push(rotate(hex, 270)); | ||
output.push(hex, rotate(hex, 90), rotate(hex, 180), rotate(hex, 270)); | ||
break; | ||
@@ -56,0 +44,0 @@ } |
@@ -0,6 +1,5 @@ | ||
import hex2hsl from './hex2hsl'; | ||
import hsl2hex from './hsl2hex'; | ||
import hex2hsl from './hex2hsl'; | ||
import { HSLKeys, invariant, isPlainObject, isString, messages, pick } from './modules/utils'; | ||
import parseCSS from './parse-css'; | ||
import { HSLKeys, invariant, isPlainObject, isString, messages, pick } from './utils'; | ||
import { HSL, RGB } from './types'; | ||
@@ -12,6 +11,6 @@ | ||
export function shift(input: string, options: Partial<HSL | RGB>): string { | ||
invariant(!isString(input), messages.inputString); | ||
invariant(!isPlainObject(options), messages.options); | ||
invariant(isString(input), messages.inputString); | ||
invariant(isPlainObject(options), messages.options); | ||
return hsl2hex({ ...hex2hsl(parseCSS(input)), ...pick(options, HSLKeys) }); | ||
} |
import hex2rgb from './hex2rgb'; | ||
import { invariant, isString, messages } from './modules/utils'; | ||
import parseCSS from './parse-css'; | ||
import { invariant, isString, messages } from './utils'; | ||
@@ -9,3 +9,3 @@ /** | ||
export default function textColor(input: string): string { | ||
invariant(!isString(input), messages.inputString); | ||
invariant(isString(input), messages.inputString); | ||
@@ -12,0 +12,0 @@ const { r, g, b } = hex2rgb(parseCSS(input)); |
@@ -0,1 +1,2 @@ | ||
/* eslint-disable typescript-sort-keys/interface */ | ||
export interface Analysis { | ||
@@ -2,0 +3,0 @@ brightnessDifference: number; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
16
255
240338
4737
1