From 6483a9dc7496b942252cff51b77309afaa840b23 Mon Sep 17 00:00:00 2001 From: Mordechai Zuber Date: Thu, 25 Dec 2014 18:50:36 +0200 Subject: [PATCH] Add typings for tinycolor.js --- tinycolor/tinycolor-tests.ts | 122 ++++++++++++ tinycolor/tinycolor.d.ts | 371 +++++++++++++++++++++++++++++++++++ 2 files changed, 493 insertions(+) create mode 100644 tinycolor/tinycolor-tests.ts create mode 100644 tinycolor/tinycolor.d.ts diff --git a/tinycolor/tinycolor-tests.ts b/tinycolor/tinycolor-tests.ts new file mode 100644 index 000000000..b0903b594 --- /dev/null +++ b/tinycolor/tinycolor-tests.ts @@ -0,0 +1,122 @@ +/// + +/* + * Not all possible formats for construction are displayed. + * To see a complete list please view: https://github.com/bgrins/TinyColor + */ +var tester: tinycolorInstance = tinycolor("red"); + +/* Constructor Tests*/ + +// string +tester = tinycolor("#ffffff"); + +//rgb && rgba +tester = tinycolor({ r: 40, g: 30, b: 20 }); +tester = tinycolor({ r: 255, g: 20, b: 10, a: 0 }); +tester = tinycolor.fromRatio({ r: 0.5, g: 0.2, b: 1, a: 0 }); +tester = tinycolor.fromRatio({ r: 1, g: 0, b: 0.7, a: 0 }); + +//hsl && hsla +tester = tinycolor({ h: 0, s: 0, l: 0 }); +tester = tinycolor({ h: 0, s: 0, l: 0, a: 0 }); +tester = tinycolor.fromRatio({ h: 0.5, s: 0.2, l: 1, a: 0 }); + +//hsv && hsva +tester = tinycolor({ h: 0, s: 0, v: 0 }); +tester = tinycolor({ h: 0, s: 0, v: 0, a: 0 }); + +//tinycolor static methods +tester = tinycolor.mix(tester, tester); +tester = tinycolor.mix(tester, tester, 50); +tester = tinycolor.random(); + +/*Tinycolor object properties*/ + +var readable: Readable.Readable = tinycolor.readability(tester, tester); +var isReadable: boolean = tinycolor.isReadable(tester, tester); +tester = tinycolor.mostReadable(tester, [tester, tester, tester]); + +var hexNames: { [key: string]: string } = tinycolor.hexNames; +var names: { [key: string]: string } = tinycolor.names; + +/*Instance Methods*/ + +//check properties +var isValid: boolean = tester.isValid(); +var isLight: boolean = tester.isLight(); +var isDark: boolean = tester.isDark(); + +//get properties +var alpha: number = tester.getAlpha(); +var brightness: number = tester.getBrightness(); +var format: string = tester.getFormat(); +var originalInput: any = tester.getOriginalInput(); + +//set properties +tester = tester.setAlpha(alpha); + +//representations +var hsva: ColorFormats.HSVA = tester.toHsv(); +var hsvString: string = tester.toHsvString(); + +var hsl: ColorFormats.HSLA = tester.toHsl(); +var hslString: string = tester.toHslString(); + +var hex: string = tester.toHex(); +var hexString: string = tester.toHexString(); + +var hex8: string = tester.toHex8(); +var hex8String: string = tester.toHex8String(); + +var rgba: ColorFormats.RGBA = tester.toRgb(); +var rgbString: string = tester.toString(); + +var percentageRGBA: ColorFormats.RGBA = tester.toPercentageRgb(); +var percentageRGBString: string = tester.toPercentageRgbString(); + +var name: string = tester.toName(); +var filter: string = tester.toFilter(); +var sString: string = tester.toString(); +sString = tester.toString("rgb"); +sString = tester.toString("prgb"); +sString = tester.toString("hex6"); +sString = tester.toString("hex3"); +sString = tester.toString("hex8"); +sString = tester.toString("name"); +sString = tester.toString("hsl"); +sString = tester.toString("hsv"); + +//color modifications +tester = tester.lighten(); +tester = tester.lighten(20); + +tester = tester.brighten(); +tester = tester.brighten(20); + +tester = tester.darken(); +tester = tester.darken(20); + +tester = tester.desaturate(); +tester = tester.desaturate(20); + +tester = tester.saturate(); +tester = tester.saturate(20); + +tester = tester.spin(); +tester = tester.spin(20); + +tester = tester.greyscale(); + +//color combinations +var colors: tinycolorInstance[] = tester.analogous(); +colors = tester.analogous(6, 30); + +colors = tester.monochromatic(); +colors = tester.monochromatic(10); + +colors = tester.splitcomplement(); +colors = tester.triad(); +colors = tester.tetrad(); + +tester = tester.complement(); \ No newline at end of file diff --git a/tinycolor/tinycolor.d.ts b/tinycolor/tinycolor.d.ts new file mode 100644 index 000000000..52dc4dcf0 --- /dev/null +++ b/tinycolor/tinycolor.d.ts @@ -0,0 +1,371 @@ +// Type definitions for tinycolor v1.1.1 +// Project: https://github.com/bgrins/TinyColor +// Definitions by: Mordechai Zuber +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +declare var tinycolor: tinycolor; + +interface tinycolor { + + /** + * Create a tinycolor instance of the color named. + * + * @param color - the color as a string to create an instance for. + */ + (color: string): tinycolorInstance; + + /** + * Create a tinycolor instance with the given RGB values. + * + * @param color - the rgb values to apply to the new instance. + */ + (color: ColorFormats.RGB): tinycolorInstance; + + /** + * Create a tinycolor instance with the given RGBA values. + * + * @param color - the rgba values to apply to the new instance. + */ + (color: ColorFormats.RGBA): tinycolorInstance; + + /** + * Create a tinycolor instance with the given HSL values. + * + * @param color - the hsl values to apply to the new instance. + */ + (color: ColorFormats.HSL): tinycolorInstance; + + /** + * Create a tinycolor instance with the given HSLA values. + * + * @param color - the hsla values to apply to the new instance. + */ + (color: ColorFormats.HSLA): tinycolorInstance; + + /** + * Create a tinycolor instance with the given HSV values. + * + * @param color - the hsv values to apply to the new instance. + */ + (color: ColorFormats.HSV): tinycolorInstance; + + /** + * Create a tinycolor instance with the given HSVA values. + * + * @param color - the hsva values to apply to the new instance. + */ + (color: ColorFormats.HSVA): tinycolorInstance; + + /** + * Create a tinycolor instance based off the relative values. + * Works with any color formats + * + * @param ratio - the relative color/hue values to apply to the new instance. + */ + fromRatio(ratio: any): tinycolorInstance; // any of the interfaces defined in the ColorFormats module. + + /** + * Compares the two colors and returns the difference between their brightness and color/hue + * + * @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; + + /** + * Ensure that foreground and background color combinations provide sufficient contrast. + * + * @param foreColor - the fore color wanted. + * @param backCOlor - the back color wanted. + */ + isReadable(foreColor: tinycolorInstance, backColor: tinycolorInstance): boolean; + + /** + * Given a base color and a list of possible foreground or background colors for that base, + * returns the most readable color. + * + * @param color - the base color. + * @param colorsToCompare - array of colors to pick the most readable one from. + */ + mostReadable(color: tinycolorInstance, colorsToCompare: tinycolorInstance[]): tinycolorInstance; + + /**/ + mix(color1: tinycolorInstance, color2: tinycolorInstance, amount?: number): tinycolorInstance; + + /** + * Returns a random color + */ + random(): tinycolorInstance; + + /** + * key: hex value + * value: string name ex. hexnames["f00"] --> "red" + */ + hexNames: { [key: string]: string }; + + /** + * key: 'real' color name + * value: hex value ex. names["red"] --> "f00" + */ + names: { [key: string]: string }; +} + +interface tinycolorInstance { + + /** + * Return an indication whether the color was successfully parsed. + */ + isValid(): boolean; + + /** + * Return an indication whether the color's perceived brightness is light. + */ + isLight(): boolean; + + /** + * Return an indication whether the color's perceived brightness is dark. + */ + isDark(): boolean; + + /** + * Returns the format used to create the tinycolor instance. + */ + getFormat(): string; + + /** + * Returns the input passed into the constructer used to create the tinycolor instance. + */ + getOriginalInput(): any; // any of the interfaces in ColorFormats or a string + + /** + * Returns the alpha value of the color + */ + getAlpha(): number; + + /** + * Returns the perceived brightness of the color, from 0-255. + */ + getBrightness(): number; + + /** + * Sets the alpha value on the current color. + * + * @param alpha - The new alpha value. The accepted range is 0-1. + */ + setAlpha(alpha: number): tinycolorInstance; + + /** + * Returns the object as a HSVA object. + */ + toHsv(): ColorFormats.HSVA; + + /** + * Returns the hsva values interpolated into a string with the following format: + * "hsva(xxx, xxx, xxx, xx)". + */ + toHsvString(): string; + + /** + * Returns the object as a HSLA object. + */ + toHsl(): ColorFormats.HSLA; + + /** + * Returns the hsla values interpolated into a string with the following format: + * "hsla(xxx, xxx, xxx, xx)". + */ + toHslString(): string; + + /** + * Returns the hex value of the color. + */ + toHex(): string; + + /** + * Returns the hex value of the color -with a # appened. + */ + toHexString(): string; + + /** + * Returns the hex 8 value of the color. + */ + toHex8(): string; + + /** + * Returns the hex 8 value of the color -with a # appened. + */ + toHex8String(): string; + + /** + * Returns the object as a RGBA object. + */ + toRgb(): ColorFormats.RGBA; + + /** + * Returns the RGBA values interpolated into a string with the following format: + * "RGBA(xxx, xxx, xxx, xx)". + */ + toRgbString(): string; + + /** + * Returns the object as a RGBA object. + */ + toPercentageRgb(): ColorFormats.RGBA; + + /** + * Returns the RGBA relative values interpolated into a string with the following format: + * "RGBA(xxx, xxx, xxx, xx)". + */ + toPercentageRgbString(): string; + + /** + * The 'real' name of the color -if there is one. + */ + toName(): string; + + /** + * Returns the color represented as a Microsoft filter for use in old versions of IE. + */ + toFilter(): string; + + /** + * String representation of the color. + * + * @param format - The format to be used when displaying the string representation. + * The accepted values are: "rgb", "prgb", "hex6", "hex3", "hex8", "name", "hsl", "hsv". + */ + toString(format?: string): string; + + /** + * Lighten the color a given amount. Providing 100 will always return white. + * + * @param amount - The amount to lighten by. The valid range is 0 to 100. + * Default value: 10. + */ + lighten(amount?: number): tinycolorInstance; + + /** + * Brighten the color a given amount. + * + * @param amount - The amount to brighten by. The valid range is 0 to 100. + * Default value: 10. + */ + brighten(amount?: number): tinycolorInstance; + + /** + * Darken the color a given amount. + * Providing 100 will always return black. + * + * @param amount - The amount to darken by. The valid range is 0 to 100. + * Default value: 10. + */ + darken(amount?: number): tinycolorInstance; + + /** + * Desaturate the color a given amount. + * Providing 100 will is the same as calling greyscale. + * + * @param amount - The amount to desaturate by. The valid range is 0 to 100. + * Default value: 10. + */ + desaturate(amount?: number): tinycolorInstance; + + /** + * Saturate the color a given amount. + * + * @param amount - The amount to saturate by. The valid range is 0 to 100. + * Default value: 10. + */ + saturate(amount?: number): tinycolorInstance; + + /** + * Completely desaturates a color into greyscale. + * Same as calling desaturate(100). + */ + greyscale(): tinycolorInstance; + + /** + * Spin the hue a given amount. Calling with 0, 360, or -360 will do nothing. + * + * @param amount - The amount to spin by. The valid range is -360 to 360. + * Default value: 0. + */ + spin(amount?: number): tinycolorInstance; + + /** + * Gets an analogous color scheme based off of the current color. + * + * @param results - The amount of results to return. + * Default value: 6. + * @param slices - The amount to slice the input color by. + * Default value: 30. + */ + analogous(results?: number, slices?: number): tinycolorInstance[]; + + /** + * Gets a monochromatic color scheme based off of the current color. + * + * @param results - The amount of results to return. + * Default value: 6. + */ + monochromatic(results?: number): tinycolorInstance[]; + + /** + * Gets a split complement color scheme based off of the current color. + */ + splitcomplement(): tinycolorInstance[]; + + /** + * Gets a triad based off of the current color. + */ + triad(): tinycolorInstance[]; + + /** + * Gets a tetrad based off of the current color. + */ + tetrad(): tinycolorInstance[]; + + /** + * Gets the complement of the current color + */ + complement(): tinycolorInstance; +} + +declare module Readable { + interface Readable { + brightness: number; + color: number; + } +} + +declare module ColorFormats { + interface RGB { + r: number; + g: number; + b: number; + } + + interface RGBA extends RGB { + a: number + } + + interface HSL { + h: number; + s: number; + l: number; + } + + interface HSLA extends HSL { + a: number; + } + + interface HSV { + h: number; + s: number; + v: number; + } + + interface HSVA extends HSV { + a: number; + } +} \ No newline at end of file