🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
DemoInstallSign in
Socket
DemoInstallSign in

@thebespokepixel/es-tinycolor

Package Overview
Dependencies
Maintainers
1
Versions
31
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@thebespokepixel/es-tinycolor - npm Package Compare versions

Comparing version

3.0.1
to
3.0.2

424

index.d.ts
export class TinyColor {
/**
* Create a new ID
*
* @return {number} Incremented ID counter
*/
static newId(): number;
static registerFormat(id: any, options?: {}): any;
static equals(color1: any, color2: any): boolean;
static fromRatio(color: any, options: any): TinyColor;
static readability(color1: any, color2: any): number;
static isReadable(color1: any, color2: any, wcag2: any): boolean;
static mostReadable(baseColor: any, colorList: any, args: any): any;
static mix(color1: any, color2: any, amount: any): TinyColor;
constructor(color: any, options?: {});
/**
* Register a TinyColor extension
* @param {string} id The plugin identifier
* @param {object} [options={}] Plugin options
* @param {string} options.alphaFormat rgb|hex
* @param {boolean} options.shortHex Short hex codes #ABC, if possible
* @param {boolean} options.upperCaseHex User UPPER case hex
* @return {TinyColorExtension} The TinyColor extension
*/
static registerFormat(id: string, options?: {
alphaFormat: string;
shortHex: boolean;
upperCaseHex: boolean;
}): TinyColorExtension;
/**
* Are two TinyColor colours equivalent?
*
* @param {TinyColor} color1 The first color
* @param {TinyColor} color2 The second color
* @return {boolean} Equivalent or not?
*/
static equals(color1: TinyColor, color2: TinyColor): boolean;
/**
* Create a new TinyColor from values from 0..1
*
* @param {Object} color The color
* @param {<type>} options The options
* @return {TinyColor} The tiny color.
*/
static fromRatio(color: any, options: <type>() => any): TinyColor;
/**
* Analyze the 2 colors and returns the color contrast defined by (WCAG Version 2)
*
* @param {TinyColor} color1 The first color
* @param {TinyColor} color2 The second color
* @return {number} The color contrast defined by (WCAG Version 2)
*/
static readability(color1: TinyColor, color2: TinyColor): number;
/**
* Ensure that foreground and background color combinations meet WCAG2 guidelines.
*
* @param {TinyColor} color1 The first color
* @param {TinyColor} color2 The second color
* @param {object} wcag2 The WCAG2 properties to test
* @param {object} wcag2.level The level to test "AA" or "AAA" (default "AA")
* @param {object} wcag2.size The content size to test "large" or "small" (default "small")
* @example Tinycolor.isReadable("#000", "#111") → false
* @example Tinycolor.isReadable("#000", "#111", {level:"AA",size:"large"}) → false
* @return {(boolean|number)} True if readable, False otherwise.
*/
static isReadable(color1: TinyColor, color2: TinyColor, wcag2: {
level: object;
size: object;
}): (boolean | number);
/**
* Given a base color and a list of possible foreground or background colors for that
* base, returns the most readable color.
*
* Optionally returns Black or White if the most readable color is unreadable.
*
* @param {TinyColor} baseColor The base color
* @param {[TinyColor]} colorList An array of TinyColors
* @param {object} [args={}] The arguments
* @param {boolean} args.includeFallbackColors Include fallback colors?
* @param {object} args.level The level to test "AA" or "AAA" (default "AA")
* @param {object} args.size The content size to test "large" or "small" (default "small")
* @example Tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"], {includeFallbackColors:false}).toHexString(); // "#112255"
* @example Tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"], {includeFallbackColors:true}).toHexString(); // "#ffffff"
* @example Tinycolor.mostReadable("#a8015a", ["#faf3f3"], {includeFallbackColors:true, level:"AAA", size:"large"}).toHexString(); // "#faf3f3"
* @example Tinycolor.mostReadable("#a8015a", ["#faf3f3"], {includeFallbackColors:true, level:"AAA", size:"small"}).toHexString(); // "#ffffff"
* @return {TinyColor} A TinyColor instance of the msot readable color.
*/
static mostReadable(baseColor: TinyColor, colorList: [TinyColor], args?: {
includeFallbackColors: boolean;
level: object;
size: object;
}): TinyColor;
/**
* Mix a second colour into the first
*
* @param {TinyColor} color1 The first color
* @param {TinyColor} color2 The second color
* @param {number} amount The mix amount of the second color
* @return {TinyColor} A new, mixed TinyColor instance
*/
static mix(color1: TinyColor, color2: TinyColor, amount: number): TinyColor;
/**
* Create a new TinyColor instance
* @param {string|array|object} color Notation describing a color
* @param {object} options Options object (see below)
* @return {TinyColor} An instance representing the color
*/
constructor(color: string | any[] | object, options?: object);
_originalInput: any;

@@ -21,45 +111,166 @@ _r: any;

_tc_id: number;
/**
* Determines if dark.
*
* @return {boolean} True if dark, False otherwise.
*/
isDark(): boolean;
/**
* Determines if light.
*
* @return {boolean} True if light, False otherwise.
*/
isLight(): boolean;
/**
* Determines if valid.
*
* @return {boolean} True if valid, False otherwise.
*/
isValid(): boolean;
getOriginalInput(): any;
getFormat(): any;
getAlpha(): number;
/**
* Gets the original input.
*
* @return {string|object} The original input.
*/
getOriginalInput(): string | object;
/**
* Gets the format.
*
* @return {string} The format.
*/
getFormat(): string;
/**
* Gets the alpha.
*
* @return {<number>} The alpha.
*/
getAlpha(): <number>() => any;
/**
* Gets the brightness.
*
* @return {number} The brightness.
*/
getBrightness(): number;
/**
* Gets the luminance.
*
* @return {number} The luminance.
*/
getLuminance(): number;
toString(format: any): any;
toName(): any;
toRgb(): {
r: any;
g: any;
b: any;
a: any;
};
/**
* Return the current color as a string.
*
* @param {string} format The color format
* @return {string} The current color, as a string.
*/
toString(format: string): string;
/**
* Returns a name representation of the object.
*
* @return {string} The name of the colour.
*/
toName(): string;
/**
* Returns a rgb representation of the object.
*
* @return {object} Rgb representation of the object.
*/
toRgb(): object;
/**
* Returns a rgb string representation of the object.
*
* @return {string} Rgb string representation of the object.
*/
toRgbString(): string;
toRgbArray(): any[];
toPercentageRgb(): {
r: string;
g: string;
b: string;
a: any;
};
/**
* Returns a rgb array representation of the object.
*
* @return {[number]} Rgb array representation of the object.
*/
toRgbArray(): [number];
/**
* Returns a percentage rgb representation of the object.
*
* @return {object} Percentage rgb representation of the object.
*/
toPercentageRgb(): object;
/**
* Returns a percentage rgb string representation of the object.
*
* @return {string} Percentage rgb string representation of the object.
*/
toPercentageRgbString(): string;
toHex(allow3Char: any): string;
toHexString(allow3Char: any): string;
toHex8(allow4Char: any): string;
/**
* Return the hex string of a color, as pure hexadecimal.
*
* @param {boolean} allow3Char Allow 3 digit RGB strings
* @return {string} The Hex string of the color.
*/
toHex(allow3Char: boolean): string;
/**
* Return the hex string of a color, with a leading #
*
* @param {boolean} allow3Char Allow 3 digit RGB strings
* @return {string} The Hex string of the color.
*/
toHexString(allow3Char: boolean): string;
/**
* Return the hex string of a color with aplha, as pure hexadecimal.
*
* @param {boolean} allow4Char Allow 4 digit RGBA strings
* @return {string} The Hex string of the color.
*/
toHex8(allow4Char: boolean): string;
/**
* Return the hex string of a color with aplha, with a leading #
*
* @param {boolean} allow3Char Allow 4 digit RGBA strings
* @return {string} The Hex string of the color.
*/
toHex8String(allow4Char: any): string;
toHsv(): any;
toHsvString(): any;
toHsl(): any;
toHslString(): any;
setAlpha(value: any): TinyColor;
/**
* Returns a HSV object representation of the object.
*
* @return {object} HSV(A) representation of the color.
*/
toHsv(): object;
/**
* Returns a HSV string representation of the object.
*
* @return {string} hsv(h, s, v[, a]) representation of the color.
*/
toHsvString(): string;
/**
* Returns a HSL object representation of the object.
*
* @return {object} HSL(A) representation of the color.
*/
toHsl(): object;
/**
* Returns a HSL string representation of the object.
*
* @return {string} hsl(h, s, l[, a]) representation of the color.
*/
toHslString(): string;
/**
* Sets the alpha.
*
* @param {number} value The alpha value (0 - 1.0)
* @return {TinyColor} The current colour with the set alpha.
*/
setAlpha(value: number): TinyColor;
/**
* Creates a new instance of the object with same properties than original.
*
* @return {TinyColor} Copy of this object.
*/
clone(): TinyColor;
lighten(...args: any[]): any;
brighten(...args: any[]): any;
darken(...args: any[]): any;
desaturate(...args: any[]): any;
saturate(...args: any[]): any;
greyscale(...args: any[]): any;
invert(...args: any[]): any;
spin(...args: any[]): any;
lighten(...args: any[]): TinyColor;
brighten(...args: any[]): TinyColor;
darken(...args: any[]): TinyColor;
desaturate(...args: any[]): TinyColor;
saturate(...args: any[]): TinyColor;
greyscale(...args: any[]): TinyColor;
invert(...args: any[]): TinyColor;
spin(...args: any[]): TinyColor;
analogous(...args: any[]): any;

@@ -77,17 +288,118 @@ complement(...args: any[]): any;

export namespace tinycolor {
import equals = TinyColor.equals;
export { equals };
import registerFormat = TinyColor.registerFormat;
export { registerFormat };
import fromRatio = TinyColor.fromRatio;
export { fromRatio };
import mix = TinyColor.mix;
export { mix };
import readability = TinyColor.readability;
export { readability };
import isReadable = TinyColor.isReadable;
export { isReadable };
import mostReadable = TinyColor.mostReadable;
export { mostReadable };
/**
* Are two TinyColor colours equivalent?
*
* @alias tinycolor.equals
* @param {TinyColor} color1 The first color
* @param {TinyColor} color2 The second color
* @return {boolean} Equivalent or not?
*/
export function equals(color1: TinyColor, color2: TinyColor): boolean;
/**
* Register a TinyColor extension
*
* @alias tinycolor.registerFormat
* @param {string} id The plugin identifier
* @param {object} [options={}] Plugin options
* @param {string} options.alphaFormat rgb|hex
* @param {boolean} options.shortHex Short hex codes #ABC, if possible
* @param {boolean} options.upperCaseHex User UPPER case hex
* @return {TinyColorExtension} The TinyColor extension
*/
export function registerFormat(id: string, options?: {
alphaFormat: string;
shortHex: boolean;
upperCaseHex: boolean;
}): TinyColorExtension;
/**
* Create a new TinyColor from values from 0..1
*
* @alias tinycolor.fromRatio
* @param {object} color The color values
* @param {object} options Options to pass to TinyColor constructor
* @return {TinyColor} A TinyColor instance
*/
export function fromRatio(color: any, options: any): TinyColor;
/**
* Mix a second colour into the first
*
* @alias tinycolor.mix
* @param {TinyColor} color1 The first color
* @param {TinyColor} color2 The second color
* @param {number} amount The mix amount of the second color
* @return {TinyColor} A new, mixed TinyColor instance
*/
export function mix(color1: TinyColor, color2: TinyColor, amount: number): TinyColor;
/**
* How readable is the first color over the second color
*
* @alias tinycolor.readability
* @param {TinyColor} color1 The first color
* @param {TinyColor} color2 The second color
* @return {number} The color contrast defined by (WCAG Version 2)
*/
export function readability(color1: TinyColor, color2: TinyColor): number;
/**
* Ensure that foreground and background color combinations meet WCAG2 guidelines.
*
* @alias tinycolor.isReadable
* @param {TinyColor} color1 The first color
* @param {TinyColor} color2 The second color
* @param {object} wcag2 The WCAG2 properties to test
* @param {object} wcag2.level The level to test "AA" or "AAA" (default "AA")
* @param {object} wcag2.size The content size to test "large" or "small" (default "small")
* @example tinycolor.isReadable("#000", "#111") → false
* @example tinycolor.isReadable("#000", "#111", {level:"AA",size:"large"}) → false
* @return {(boolean|number)} True if readable, False otherwise.
*/
export function isReadable(color1: TinyColor, color2: TinyColor, wcag2: {
level: any;
size: any;
}): number | boolean;
/**
* Given a base color and a list of possible foreground or background colors for that
* base, returns the most readable color.
*
* Optionally returns Black or White if the most readable color is unreadable.
*
* @alias tinycolor.mostReadable
* @param {TinyColor} baseColor The base color
* @param {[TinyColor]} colorList An array of TinyColors
* @param {object} [args={}] The arguments
* @param {boolean} args.includeFallbackColors Include fallback colors?
* @param {object} args.level The level to test "AA" or "AAA" (default "AA")
* @param {object} args.size The content size to test "large" or "small" (default "small")
* @example tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(); // "#112255"
* @example tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString(); // "#ffffff"
* @example tinycolor.mostReadable("#a8015a", ["#faf3f3"], {includeFallbackColors:true,level:"AAA",size:"large"}).toHexString(); // "#faf3f3"
* @example tinycolor.mostReadable("#a8015a", ["#faf3f3"], {includeFallbackColors:true,level:"AAA",size:"small"}).toHexString(); // "#ffffff"
* @return {TinyColor} A TinyColor instance of the msot readable color.
*/
export function mostReadable(baseColor: TinyColor, colorList: [TinyColor], args?: {
includeFallbackColors: boolean;
level: any;
size: any;
}): TinyColor;
export { names };
}
declare class TinyColorExtension {
constructor(api: any, id: any, options?: {});
api: any;
id: any;
options: {};
use(specified: any): TinyColorExtension;
wanted: any;
parse(input: any): {
as: (format: any) => any;
rgba: {
r: any;
g: any;
b: any;
a: any;
};
valueOf: () => any;
};
print(id: any, rgba: any): any;
complete(rgba: any): string;
}
export {};

555

index.js

@@ -37,5 +37,34 @@ const mathRound = Math.round;

/**
* Converts a base-16 hex value into a base-10 integer
*
* @alias converters.convertHexToInt
* @param {string} val Hexadecimal input value
* @return {number} Integer value
*/
const convertHexToInt = value => Number.parseInt(value, 16);
/**
* Converts a hex value to a decimal
*
* @alias converters.convertHexToDecimal
* @param {string} h Hexadecimal input value
* @return {number} Decimal value
*/
const convertHexToDecimal = h => convertHexToInt(h) / 255;
/**
* Replace a decimal with it's percentage value
*
* @alias converters.convertToPercentage
* @param {number} n Decimal input value
* @return {string} Percentage string
*/
const convertToPercentage = n => n <= 1 ? `${n * 100}%` : n;
/**
* Handle conversion of internal precise values to exportable values. Should be
* able to accept a tinycolour instance 'this' value.
*
* @alias converters.rawToRgba
* @param {object} raw { _r, _g, _b, _a } with _r, _g, _b in [0.0, 255.0] and _a in [0, 1]
* @return {object} { r, g, b } in [0, 255]
*/
const rawToRgba = raw => {

@@ -45,3 +74,20 @@ const [r, g, b] = [raw._r, raw._g, raw._b].map(value => mathRound(value));

};
/**
* Handle conversion of internal precise values to exportable values,
* maintaining deep precision. Should be able to accept a tinycolour instance
* 'this' value.
*
* @alias converters.rawToDeepRgba
* @param {object} raw { _r, _g, _b, _a } with _r, _g, _b in [0.0, 255.0] and _a in [0, 1]
* @return {object} { r, g, b, a } in [0.0, 255.0]
*/
const rawToDeepRgba = raw => ({r: raw._r, g: raw._g, b: raw._b, a: raw._a});
/**
* Handle bounds / percentage checking to conform to CSS color spec
* @link{http://www.w3.org/TR/css3-color/|www.w3.org/TR/css3-color}
*
* @alias converters.conformRgba
* @param {object} rgba { r, g, b, a } in [0, 255] or [0, 1]
* @return {object} { r, g, b } in [0, 255]
*/
const conformRgba = rgba => {

@@ -59,2 +105,14 @@ const [r, g, b] = [rgba.r, rgba.g, rgba.b].map(n => bound01(n, 255) * 255);

const rgbaToArray = rgba => (rgba.a === 1) ? [rgba.r, rgba.g, rgba.b] : [rgba.r, rgba.g, rgba.b, mathRound(rgba.a * 255)];
/**
* Convert RGBA to hexadecimal
*
* Converts an RGBA color plus alpha transparency to hex
* Assumes r, g, b are contained in the set [0, 255] and
* a in [0, 1]. Returns a 4 or 8 character rgba hex
*
* @alias converters.rgbaToHex
* @param {object} rgba The rgba object.
* @param {boolean} allowShort Allow short hex output
* @return {string} The hex output.
*/
const rgbaToHex = (rgba, allowShort) => {

@@ -64,9 +122,36 @@ const hex = rgbaToArray(rgba).map(n => n.toString(16)).map(value => pad2(value));

};
/**
* Convert RGB to hexadecimal
*
* Converts an RGBA color plus alpha transparency to hex
* Assumes r, g, b are contained in the set [0, 255]. Returns a 3 or 6 character rgba hex
*
* @alias converters.rgbToHex
* @param {object} rgb The rgb object.
* @param {boolean} allowShort Allow short hex output
* @return {string} The hex output.
*/
const rgbToHex = (rgba, allowShort) => rgbaToHex({...rgba, a: 1}, allowShort);
/**
* Calculates the brightness.
* http://www.w3.org/TR/AERT#color-contrast
*
* @alias calculations.calcBrightness
* @param {object} rgb The rgb
* @return {number} The brightness.
*/
const calcBrightness = rgb => ((rgb.r * 299) + (rgb.g * 587) + (rgb.b * 114)) / 1000;
function calcLuminance(rgb, deepRgb) {
const RsRGB = deepRgb.r / 255;
const GsRGB = deepRgb.g / 255;
const BsRGB = deepRgb.b / 255;
/**
* Calculates the luminance.
* http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
*
* @alias calculations.calcLuminance
* @param {TinyColor} rgb The rgb color
* @return {number} The luminance.
*/
function calcLuminance(rgb) {
const RsRGB = rgb.r / 255;
const GsRGB = rgb.g / 255;
const BsRGB = rgb.b / 255;
const R = RsRGB <= 0.039_28 ? RsRGB / 12.92 : ((RsRGB + 0.055) / 1.055) ** 2.4;

@@ -77,2 +162,11 @@ const G = GsRGB <= 0.039_28 ? GsRGB / 12.92 : ((GsRGB + 0.055) / 1.055) ** 2.4;

}
/**
* Calculates the mix of two colors.
*
* @alias calculations.calcMix
* @param {TinyColor} color1 The first color
* @param {TinyColor} color2 The second color
* @param {number} amount The amount to mix
* @return {TinyColor} The mixed color.
*/
function calcMix(color1, color2, amount) {

@@ -92,2 +186,11 @@ amount = (amount === 0) ? 0 : (amount || 50);

/**
* Return valid WCAG2 parameters for isReadable.
*
* @alias readability.validateWCAG2Parms
* @param {object} parms The parameters
* @param {object} parms.level The level to test "AA" or "AAA" (default "AA")
* @param {object} parms.size The content size to test "large" or "small" (default "small")
* @return {object} sanitized parameters
*/
function validateWCAG2Parms(parms) {

@@ -110,2 +213,9 @@ let level;

}
/**
* Analyze the 2 colors and returns the color contrast defined by (WCAG Version 2)
*
* @param {TinyColor} color1 The first color
* @param {TinyColor} color2 The second color
* @return {number} The color contrast defined by (WCAG Version 2)
*/
function readability(color1, color2) {

@@ -116,2 +226,14 @@ const c1 = new TinyColor(color1);

}
/**
* Ensure that foreground and background color combinations meet WCAG2 guidelines.
*
* @param {TinyColor} color1 The first color
* @param {TinyColor} color2 The second color
* @param {object} wcag2 The WCAG2 properties to test
* @param {object} wcag2.level The level to test "AA" or "AAA" (default "AA")
* @param {object} wcag2.size The content size to test "large" or "small" (default "small")
* @example Tinycolor.isReadable("#000", "#111") → false
* @example Tinycolor.isReadable("#000", "#111", {level:"AA",size:"large"}) → false
* @return {(boolean|number)} True if readable, False otherwise.
*/
function isReadable(color1, color2, wcag2) {

@@ -133,2 +255,20 @@ const readable = readability(color1, color2);

}
/**
* Given a base color and a list of possible foreground or background colors for that
* base, returns the most readable color.
*
* Optionally returns Black or White if the most readable color is unreadable.
*
* @param {TinyColor} baseColor The base color
* @param {[TinyColor]} colorList An array of TinyColors
* @param {object} [args={}] The arguments
* @param {boolean} args.includeFallbackColors Include fallback colors?
* @param {object} args.level The level to test "AA" or "AAA" (default "AA")
* @param {object} args.size The content size to test "large" or "small" (default "small")
* @example Tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"], {includeFallbackColors:false}).toHexString(); // "#112255"
* @example Tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"], {includeFallbackColors:true}).toHexString(); // "#ffffff"
* @example Tinycolor.mostReadable("#a8015a", ["#faf3f3"], {includeFallbackColors:true, level:"AAA", size:"large"}).toHexString(); // "#faf3f3"
* @example Tinycolor.mostReadable("#a8015a", ["#faf3f3"], {includeFallbackColors:true, level:"AAA", size:"small"}).toHexString(); // "#ffffff"
* @return {TinyColor} A TinyColor instance of the msot readable color.
*/
function mostReadable(baseColor, colorList, args = {}) {

@@ -157,2 +297,8 @@ const {includeFallbackColors, level, size} = args;

}
/**
* Find the complementary color.
*
* @param {TinyColor} color The color
* @return {TinyColor} The new complementary Tinycolor.
*/
function complement(color) {

@@ -163,2 +309,8 @@ const hsl = new TinyColor(color).toHsl();

}
/**
* Find the color triad colors.
*
* @param {TinyColor} color The color
* @return {[TinyColor]} An array of 3 triad TinyColors.
*/
function triad(color) {

@@ -173,2 +325,8 @@ const hsl = new TinyColor(color).toHsl();

}
/**
* Find the color tetrad colors.
*
* @param {TinyColor} color The color
* @return {[TinyColor]} An array of 4 tetrad TinyColors.
*/
function tetrad(color) {

@@ -184,2 +342,8 @@ const hsl = new TinyColor(color).toHsl();

}
/**
* Find the split complementary colors.
*
* @param {TinyColor} color The color
* @return {[TinyColor]} An array of 3 split complementary TinyColors.
*/
function splitcomplement(color) {

@@ -194,2 +358,8 @@ const hsl = new TinyColor(color).toHsl();

}
/**
* Find the analogous colors.
*
* @param {TinyColor} color The color
* @return {[TinyColor]} The new analogous Tinycolors.
*/
function analogous(color, results = 6, slices = 30) {

@@ -205,2 +375,8 @@ const hsl = new TinyColor(color).toHsl();

}
/**
* Find the monochromatic color.
*
* @param {TinyColor} color The color
* @return {TinyColor} The new monochromatic Tinycolor.
*/
function monochromatic(color, results = 6) {

@@ -218,2 +394,8 @@ const hsv = new TinyColor(color).toHsv();

/**
* Apply a modification conditionally
* @param {Function} action The modification function to apply
* @param {arguments} args Arguments passed to specified function
* @return {TinyColor} The modified color
*/
function modify(action, args) {

@@ -229,2 +411,7 @@ const actions = {invert, desaturate, saturate, greyscale, lighten, brighten, darken, spin};

}
/**
* Invert Color
* @param {TinyColor} color The color to invert
* @return {TinyColor} The inverted color
*/
function invert(color) {

@@ -237,2 +424,8 @@ const rgb = new TinyColor(color).toRgb();

}
/**
* Desaturate Color
* @param {TinyColor} color The color to modify
* @param {Number} amount The amount to desaturate <= 100
* @return {TinyColor} The modified color
*/
function desaturate(color, amount) {

@@ -245,2 +438,8 @@ amount = (amount === 0) ? 0 : (amount || 10);

}
/**
* Saturate color
* @param {TinyColor} color The color to modify
* @param {Number} amount The amount to saturate <= 100
* @return {TinyColor} The modified color
*/
function saturate(color, amount) {

@@ -253,5 +452,16 @@ amount = (amount === 0) ? 0 : (amount || 10);

}
/**
* Remove all chroma, leaving luminence
* @param {TinyColor} color The color to modify
* @return {TinyColor} The modified color
*/
function greyscale(color) {
return new TinyColor(color).desaturate(100)
}
/**
* Lighten a color
* @param {TinyColor} color The color to modify
* @param {Number} amount The amount to ligten by <= 100
* @return {TinyColor} The modified color
*/
function lighten(color, amount) {

@@ -264,2 +474,8 @@ amount = (amount === 0) ? 0 : (amount || 10);

}
/**
* Brighten a color
* @param {TinyColor} color The color to modify
* @param {Number} amount The amount to brighten by <= 100
* @return {TinyColor} The modified color
*/
function brighten(color, amount) {

@@ -273,2 +489,8 @@ amount = (amount === 0) ? 0 : (amount || 10);

}
/**
* Darken a color
* @param {TinyColor} color The color to modify
* @param {Number} amount The amount to brighten by <= 100
* @return {TinyColor} The modified color
*/
function darken(color, amount) {

@@ -281,2 +503,9 @@ amount = (amount === 0) ? 0 : (amount || 10);

}
/**
* Spin takes a positive or negative amount within [-360, 360] indicating the
* change of hue. Values outside of this range will be wrapped into this range.
* @param {TinyColor} color The color to modify
* @param {Number} amount Degrees to rotate hue by
* @return {TinyColor} The modified color
*/
function spin(color, amount) {

@@ -390,2 +619,8 @@ const hsl = new TinyColor(color).toHsl();

class TinyColor {
/**
* Create a new TinyColor instance
* @param {string|array|object} color Notation describing a color
* @param {object} options Options object (see below)
* @return {TinyColor} An instance representing the color
*/
constructor(color, options = {}) {

@@ -409,8 +644,29 @@ color = color || '';

}
/**
* Create a new ID
*
* @return {number} Incremented ID counter
*/
static newId() {
return tinyCounter++
}
/**
* Register a TinyColor extension
* @param {string} id The plugin identifier
* @param {object} [options={}] Plugin options
* @param {string} options.alphaFormat rgb|hex
* @param {boolean} options.shortHex Short hex codes #ABC, if possible
* @param {boolean} options.upperCaseHex User UPPER case hex
* @return {TinyColorExtension} The TinyColor extension
*/
static registerFormat(id, options = {}) {
return extensionApi.add(id, options)
}
/**
* Are two TinyColor colours equivalent?
*
* @param {TinyColor} color1 The first color
* @param {TinyColor} color2 The second color
* @return {boolean} Equivalent or not?
*/
static equals(color1, color2) {

@@ -422,2 +678,9 @@ if (!color1 || !color2) {

}
/**
* Create a new TinyColor from values from 0..1
*
* @param {Object} color The color
* @param {<type>} options The options
* @return {TinyColor} The tiny color.
*/
static fromRatio(color, options) {

@@ -439,83 +702,254 @@ if (typeof color === 'object') {

}
/**
* Analyze the 2 colors and returns the color contrast defined by (WCAG Version 2)
*
* @param {TinyColor} color1 The first color
* @param {TinyColor} color2 The second color
* @return {number} The color contrast defined by (WCAG Version 2)
*/
static readability(color1, color2) {
return readability(color1, color2)
}
/**
* Ensure that foreground and background color combinations meet WCAG2 guidelines.
*
* @param {TinyColor} color1 The first color
* @param {TinyColor} color2 The second color
* @param {object} wcag2 The WCAG2 properties to test
* @param {object} wcag2.level The level to test "AA" or "AAA" (default "AA")
* @param {object} wcag2.size The content size to test "large" or "small" (default "small")
* @example Tinycolor.isReadable("#000", "#111") → false
* @example Tinycolor.isReadable("#000", "#111", {level:"AA",size:"large"}) → false
* @return {(boolean|number)} True if readable, False otherwise.
*/
static isReadable(color1, color2, wcag2) {
return isReadable(color1, color2, wcag2)
}
/**
* Given a base color and a list of possible foreground or background colors for that
* base, returns the most readable color.
*
* Optionally returns Black or White if the most readable color is unreadable.
*
* @param {TinyColor} baseColor The base color
* @param {[TinyColor]} colorList An array of TinyColors
* @param {object} [args={}] The arguments
* @param {boolean} args.includeFallbackColors Include fallback colors?
* @param {object} args.level The level to test "AA" or "AAA" (default "AA")
* @param {object} args.size The content size to test "large" or "small" (default "small")
* @example Tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"], {includeFallbackColors:false}).toHexString(); // "#112255"
* @example Tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"], {includeFallbackColors:true}).toHexString(); // "#ffffff"
* @example Tinycolor.mostReadable("#a8015a", ["#faf3f3"], {includeFallbackColors:true, level:"AAA", size:"large"}).toHexString(); // "#faf3f3"
* @example Tinycolor.mostReadable("#a8015a", ["#faf3f3"], {includeFallbackColors:true, level:"AAA", size:"small"}).toHexString(); // "#ffffff"
* @return {TinyColor} A TinyColor instance of the msot readable color.
*/
static mostReadable(baseColor, colorList, args) {
return mostReadable(baseColor, colorList, args)
}
/**
* Mix a second colour into the first
*
* @param {TinyColor} color1 The first color
* @param {TinyColor} color2 The second color
* @param {number} amount The mix amount of the second color
* @return {TinyColor} A new, mixed TinyColor instance
*/
static mix(color1, color2, amount) {
return calcMix(color1, color2, amount)
}
/**
* Determines if dark.
*
* @return {boolean} True if dark, False otherwise.
*/
isDark() {
return this.getBrightness() < 128
}
/**
* Determines if light.
*
* @return {boolean} True if light, False otherwise.
*/
isLight() {
return !this.isDark()
}
/**
* Determines if valid.
*
* @return {boolean} True if valid, False otherwise.
*/
isValid() {
return this._ok
}
/**
* Gets the original input.
*
* @return {string|object} The original input.
*/
getOriginalInput() {
return this._originalInput
}
/**
* Gets the format.
*
* @return {string} The format.
*/
getFormat() {
return this._format
}
/**
* Gets the alpha.
*
* @return {<number>} The alpha.
*/
getAlpha() {
return this._a
}
/**
* Gets the brightness.
*
* @return {number} The brightness.
*/
getBrightness() {
return calcBrightness(this.toRgb())
}
/**
* Gets the luminance.
*
* @return {number} The luminance.
*/
getLuminance() {
return calcLuminance(this.toRgb(), rawToDeepRgba(this))
return calcLuminance(rawToDeepRgba(this))
}
/**
* Return the current color as a string.
*
* @param {string} format The color format
* @return {string} The current color, as a string.
*/
toString(format) {
return extensionApi.print(rawToRgba(this), this._format, format)
}
/**
* Returns a name representation of the object.
*
* @return {string} The name of the colour.
*/
toName() {
return extensionApi.print(rawToRgba(this), 'name', 'toName')
}
/**
* Returns a rgb representation of the object.
*
* @return {object} Rgb representation of the object.
*/
toRgb() {
return rawToDeepRgba(this)
}
/**
* Returns a rgb string representation of the object.
*
* @return {string} Rgb string representation of the object.
*/
toRgbString() {
return rgbaToString(rawToRgba(this))
}
/**
* Returns a rgb array representation of the object.
*
* @return {[number]} Rgb array representation of the object.
*/
toRgbArray() {
return rgbaToArray(rawToRgba(this))
}
/**
* Returns a percentage rgb representation of the object.
*
* @return {object} Percentage rgb representation of the object.
*/
toPercentageRgb() {
return rgbaToPercentageRgba(rawToDeepRgba(this))
}
/**
* Returns a percentage rgb string representation of the object.
*
* @return {string} Percentage rgb string representation of the object.
*/
toPercentageRgbString() {
return rgbaToString(rgbaToPercentageRgba(rawToRgba(this)))
}
/**
* Return the hex string of a color, as pure hexadecimal.
*
* @param {boolean} allow3Char Allow 3 digit RGB strings
* @return {string} The Hex string of the color.
*/
toHex(allow3Char) {
return rgbToHex(rawToRgba(this), allow3Char)
}
/**
* Return the hex string of a color, with a leading #
*
* @param {boolean} allow3Char Allow 3 digit RGB strings
* @return {string} The Hex string of the color.
*/
toHexString(allow3Char) {
return `#${this.toHex(allow3Char)}`
}
/**
* Return the hex string of a color with aplha, as pure hexadecimal.
*
* @param {boolean} allow4Char Allow 4 digit RGBA strings
* @return {string} The Hex string of the color.
*/
toHex8(allow4Char) {
return rgbaToHex(rawToRgba(this), allow4Char)
}
/**
* Return the hex string of a color with aplha, with a leading #
*
* @param {boolean} allow3Char Allow 4 digit RGBA strings
* @return {string} The Hex string of the color.
*/
toHex8String(allow4Char) {
return `#${this.toHex8(allow4Char)}`
}
/**
* Returns a HSV object representation of the object.
*
* @return {object} HSV(A) representation of the color.
*/
toHsv() {
return extensionApi.raw(rawToDeepRgba(this), 'hsv')
}
/**
* Returns a HSV string representation of the object.
*
* @return {string} hsv(h, s, v[, a]) representation of the color.
*/
toHsvString() {
return extensionApi.print(rawToDeepRgba(this), this._format, 'hsv')
}
/**
* Returns a HSL object representation of the object.
*
* @return {object} HSL(A) representation of the color.
*/
toHsl() {
return extensionApi.raw(rawToDeepRgba(this), 'hsl')
}
/**
* Returns a HSL string representation of the object.
*
* @return {string} hsl(h, s, l[, a]) representation of the color.
*/
toHslString() {
return extensionApi.print(rawToDeepRgba(this), this._format, 'hsl')
}
/**
* Sets the alpha.
*
* @param {number} value The alpha value (0 - 1.0)
* @return {TinyColor} The current colour with the set alpha.
*/
setAlpha(value) {

@@ -526,2 +960,7 @@ this._a = boundAlpha(value);

}
/**
* Creates a new instance of the object with same properties than original.
*
* @return {TinyColor} Copy of this object.
*/
clone() {

@@ -580,2 +1019,15 @@ return new TinyColor(this.toString())

})();
/**
* Permissive string parsing. Take in a number of formats, and output an object
* based on detected format.
*
* Try to match string input using regular expressions. Keep most of the number
* bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]
* Just return an object and let the conversion functions handle that.
* This way the result will be the same whether the tinycolor is initialized
* with string or object.
*
* @param {string} color The color
* @return {object} Returns `{ r, g, b }` or `{ r, g, b, a }`
*/
function rgbStringToObject(color) {

@@ -1073,11 +1525,90 @@ let r, g, b, a, match;

}
tinycolor.equals = TinyColor.equals;
tinycolor.registerFormat = TinyColor.registerFormat;
tinycolor.fromRatio = TinyColor.fromRatio;
tinycolor.mix = TinyColor.mix;
tinycolor.readability = TinyColor.readability;
tinycolor.isReadable = TinyColor.isReadable;
tinycolor.mostReadable = TinyColor.mostReadable;
/**
* Are two TinyColor colours equivalent?
*
* @alias tinycolor.equals
* @param {TinyColor} color1 The first color
* @param {TinyColor} color2 The second color
* @return {boolean} Equivalent or not?
*/
tinycolor.equals = (color1, color2) => TinyColor.equals(color1, color2);
/**
* Register a TinyColor extension
*
* @alias tinycolor.registerFormat
* @param {string} id The plugin identifier
* @param {object} [options={}] Plugin options
* @param {string} options.alphaFormat rgb|hex
* @param {boolean} options.shortHex Short hex codes #ABC, if possible
* @param {boolean} options.upperCaseHex User UPPER case hex
* @return {TinyColorExtension} The TinyColor extension
*/
tinycolor.registerFormat = (id, options = {}) => TinyColor.registerFormat(id, options);
/**
* Create a new TinyColor from values from 0..1
*
* @alias tinycolor.fromRatio
* @param {object} color The color values
* @param {object} options Options to pass to TinyColor constructor
* @return {TinyColor} A TinyColor instance
*/
tinycolor.fromRatio = (color, options) => TinyColor.fromRatio(color, options);
/**
* Mix a second colour into the first
*
* @alias tinycolor.mix
* @param {TinyColor} color1 The first color
* @param {TinyColor} color2 The second color
* @param {number} amount The mix amount of the second color
* @return {TinyColor} A new, mixed TinyColor instance
*/
tinycolor.mix = (color1, color2, amount) => TinyColor.mix(color1, color2, amount);
/**
* How readable is the first color over the second color
*
* @alias tinycolor.readability
* @param {TinyColor} color1 The first color
* @param {TinyColor} color2 The second color
* @return {number} The color contrast defined by (WCAG Version 2)
*/
tinycolor.readability = (color1, color2) => TinyColor.readability(color1, color2);
/**
* Ensure that foreground and background color combinations meet WCAG2 guidelines.
*
* @alias tinycolor.isReadable
* @param {TinyColor} color1 The first color
* @param {TinyColor} color2 The second color
* @param {object} wcag2 The WCAG2 properties to test
* @param {object} wcag2.level The level to test "AA" or "AAA" (default "AA")
* @param {object} wcag2.size The content size to test "large" or "small" (default "small")
* @example tinycolor.isReadable("#000", "#111") → false
* @example tinycolor.isReadable("#000", "#111", {level:"AA",size:"large"}) → false
* @return {(boolean|number)} True if readable, False otherwise.
*/
tinycolor.isReadable = (color1, color2, wcag2) => TinyColor.isReadable(color1, color2, wcag2);
/**
* Given a base color and a list of possible foreground or background colors for that
* base, returns the most readable color.
*
* Optionally returns Black or White if the most readable color is unreadable.
*
* @alias tinycolor.mostReadable
* @param {TinyColor} baseColor The base color
* @param {[TinyColor]} colorList An array of TinyColors
* @param {object} [args={}] The arguments
* @param {boolean} args.includeFallbackColors Include fallback colors?
* @param {object} args.level The level to test "AA" or "AAA" (default "AA")
* @param {object} args.size The content size to test "large" or "small" (default "small")
* @example tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(); // "#112255"
* @example tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString(); // "#ffffff"
* @example tinycolor.mostReadable("#a8015a", ["#faf3f3"], {includeFallbackColors:true,level:"AAA",size:"large"}).toHexString(); // "#faf3f3"
* @example tinycolor.mostReadable("#a8015a", ["#faf3f3"], {includeFallbackColors:true,level:"AAA",size:"small"}).toHexString(); // "#ffffff"
* @return {TinyColor} A TinyColor instance of the msot readable color.
*/
tinycolor.mostReadable = (baseColor, colorList, args) => TinyColor.mostReadable(baseColor, colorList, args);
/**
* Named Colours (as per CSS color names)
*/
tinycolor.names = names;
export { TinyColor, names, tinycolor };

4

package.json
{
"version": "3.0.1",
"version": "3.0.2",
"name": "@thebespokepixel/es-tinycolor",

@@ -11,3 +11,3 @@ "description": "Fast Color Parsing and Manipulation in es2015+, based on TinyColor2",

"readme": "compile-readme -u src/docs/example.md src/docs/readme.md > readme.md",
"coverage": "c8 --reporter=lcov --reporter=text ava",
"coverage": "c8 --reporter=lcov ava; open coverage/lcov-report/index.html",
"prepublishOnly": "npx -p typescript tsc index.js --declaration --allowJs --emitDeclarationOnly"

@@ -14,0 +14,0 @@ },