From 297e70484e07161ea11d6f27e01699a2a85d3040 Mon Sep 17 00:00:00 2001 From: Niels van Hoorn Date: Mon, 26 Jun 2017 15:06:22 +0200 Subject: [PATCH 1/3] Added ColorInput type --- types/tinycolor2/index.d.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/types/tinycolor2/index.d.ts b/types/tinycolor2/index.d.ts index 7ad9d849a2..a84cfef5fb 100644 --- a/types/tinycolor2/index.d.ts +++ b/types/tinycolor2/index.d.ts @@ -70,7 +70,7 @@ interface tinycolor { * @param firstColor - the first color to be used in the comparison. * @param secondColor - the second color to be used in the comparison. */ - readability(firstColor: tinycolorInstance, secondColor: tinycolorInstance): Readable.Readable; + readability(firstColor: ColorInput, secondColor: ColorInput): Readable.Readable; /** * Ensure that foreground and background color combinations provide sufficient contrast. @@ -90,7 +90,7 @@ interface tinycolor { mostReadable(color: tinycolorInstance, colorsToCompare: tinycolorInstance[]): tinycolorInstance; /**/ - mix(color1: tinycolorInstance, color2: tinycolorInstance, amount?: number): tinycolorInstance; + mix(color1: ColorInput, color2: ColorInput, amount?: number): tinycolorInstance; /** * Returns a random color @@ -265,7 +265,6 @@ interface tinycolorInstance { * Default value: 10. */ darken(amount?: number): tinycolorInstance; - /** * Desaturate the color a given amount. * Providing 100 will is the same as calling greyscale. @@ -380,6 +379,8 @@ declare namespace ColorFormats { } } +type ColorInput = string | ColorFormats.RGB | ColorFormats.RGBA | ColorFormats.HSL | ColorFormats.HSLA | ColorFormats.HSV | ColorFormats.HSVA | tinycolorInstance + declare module 'tinycolor2' { export = tinycolor; -} +} \ No newline at end of file From cfd790c64aabf727efbdea7866ff268fb4cd1a5a Mon Sep 17 00:00:00 2001 From: Niels van Hoorn Date: Mon, 26 Jun 2017 15:06:55 +0200 Subject: [PATCH 2/3] Added equals function --- types/tinycolor2/index.d.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/types/tinycolor2/index.d.ts b/types/tinycolor2/index.d.ts index a84cfef5fb..b9bd88fd44 100644 --- a/types/tinycolor2/index.d.ts +++ b/types/tinycolor2/index.d.ts @@ -92,6 +92,11 @@ interface tinycolor { /**/ mix(color1: ColorInput, color2: ColorInput, amount?: number): tinycolorInstance; + /** + * Can be called with any tinycolor input + */ + equals(color1: ColorInput, color2: ColorInput): boolean; + /** * Returns a random color */ From 785ee394c2694853f0954346123a8e00c8f51b1a Mon Sep 17 00:00:00 2001 From: Niels van Hoorn Date: Mon, 26 Jun 2017 15:07:38 +0200 Subject: [PATCH 3/3] Updated definitions to 1.4.1 --- types/tinycolor2/index.d.ts | 16 +++++++++------- types/tinycolor2/tinycolor2-tests.ts | 4 ++++ 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/types/tinycolor2/index.d.ts b/types/tinycolor2/index.d.ts index b9bd88fd44..921d8a4f08 100644 --- a/types/tinycolor2/index.d.ts +++ b/types/tinycolor2/index.d.ts @@ -1,6 +1,6 @@ -// Type definitions for tinycolor v1.1.1 +// Type definitions for tinycolor v1.4.1 // Project: https://github.com/bgrins/TinyColor -// Definitions by: Mordechai Zuber , Geert Jansen +// Definitions by: Mordechai Zuber , Geert Jansen , Niels van Hoorn // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped declare var tinycolor: tinycolor; @@ -73,21 +73,23 @@ interface tinycolor { readability(firstColor: ColorInput, secondColor: ColorInput): Readable.Readable; /** - * Ensure that foreground and background color combinations provide sufficient contrast. + * Ensure that foreground and background color combinations meet WCAG2 guidelines. * * @param foreColor - the fore color wanted. - * @param backCOlor - the back color wanted. + * @param backColor - the back color wanted. + * @param wcag2 - The 'level' property states 'AA' or 'AAA' - if missing or invalid, it defaults to 'AA'; the 'size' property states 'large' or 'small' - if missing or invalid, it defaults to 'small'. If the entire object is absent, isReadable defaults to {level:"AA",size:"small"}. */ - isReadable(foreColor: tinycolorInstance, backColor: tinycolorInstance): boolean; + isReadable(foreColor: ColorInput, backColor: ColorInput, wcag2?: {level?: string, size?: string}): boolean; /** * Given a base color and a list of possible foreground or background colors for that base, - * returns the most readable color. + * returns the most readable color. Optionally returns Black or White if the most readable color is unreadable. * * @param color - the base color. * @param colorsToCompare - array of colors to pick the most readable one from. + * @param args - and object with extra arguments */ - mostReadable(color: tinycolorInstance, colorsToCompare: tinycolorInstance[]): tinycolorInstance; + mostReadable(color: ColorInput, colorsToCompare: ColorInput[], args?: {includeFallbackColors?: boolean, level?: string, size?: string}): tinycolorInstance; /**/ mix(color1: ColorInput, color2: ColorInput, amount?: number): tinycolorInstance; diff --git a/types/tinycolor2/tinycolor2-tests.ts b/types/tinycolor2/tinycolor2-tests.ts index b3e0d0769a..f6a6634f5f 100644 --- a/types/tinycolor2/tinycolor2-tests.ts +++ b/types/tinycolor2/tinycolor2-tests.ts @@ -28,14 +28,18 @@ tester = tinycolor({ h: 0, s: 0, v: 0, a: 0 }); //tinycolor static methods tester = tinycolor.mix(tester, tester); +tester = tinycolor.mix("#ff0000", "#00ff00"); tester = tinycolor.mix(tester, tester, 50); tester = tinycolor.random(); +var isEqual = tinycolor.equals(tester, tester); /*Tinycolor object properties*/ var readable: Readable.Readable = tinycolor.readability(tester, tester); var isReadable: boolean = tinycolor.isReadable(tester, tester); +var isReadable: boolean = tinycolor.isReadable(tester, tester, {size: "small"}); tester = tinycolor.mostReadable(tester, [tester, tester, tester]); +tester = tinycolor.mostReadable(tester, [tester, tester, tester], {size: "large", level:"AA"}); var hexNames: { [key: string]: string } = tinycolor.hexNames; var names: { [key: string]: string } = tinycolor.names;