diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index b8aecd835..d7a87dd49 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -46,6 +46,7 @@ All definitions files include a header with the author and editors, so at some p * [CasperJS](http://casperjs.org) (by [Jed Hunsaker](https://github.com/jedhunsaker)) * [Cheerio](https://github.com/MatthewMueller/cheerio) (by [Bret Little](https://github.com/blittle)) * [Chosen](http://harvesthq.github.com/chosen/) (by [Boris Yankov](https://github.com/borisyankov)) +* [Chroma.js](https://github.com/gka/chroma.js) (by [Sebastian Brückner](https://github.com/invliD)) * [Chrome](http://developer.chrome.com/extensions/) (by [Matthew Kimber](https://github.com/matthewkimber) and [otiai10](https://github.com/otiai10)) * [Chrome App](http://developer.chrome.com/apps/) (by [Adam Lay](https://github.com/AdamLay)) * [CKEditor](https://github.com/ckeditor/ckeditor-dev) (by [Ondrej Sevcik](https://github.com/ondrejsevcik)) diff --git a/chroma-js/chroma-js-tests.ts b/chroma-js/chroma-js-tests.ts new file mode 100644 index 000000000..3240ac11f --- /dev/null +++ b/chroma-js/chroma-js-tests.ts @@ -0,0 +1,120 @@ +/// + +function test_chroma() { + chroma("red"); + chroma("#ff0000"); + chroma("#f00"); + chroma("FF0000"); + chroma(255, 0, 0); + chroma([255, 0, 0]); + chroma(0, 1, 0.5, 'hsl'); + chroma([0, 1, 0.5], 'hsl'); + chroma(0, 1, 1, 'hsv'); + chroma("rgb(255,0,0)"); + chroma("rgb(100%,0%,0%)"); + chroma("hsl(0,100%,50%)"); + chroma(53.24, 80.09, 67.20, 'lab'); + chroma(53.24, 104.55, 40, 'lch'); + chroma(1, 0, 0, 'gl'); + + chroma.hex("#ff0000"); + chroma.hex("red"); + chroma.hex("rgb(255, 0, 0)"); + + chroma.rgb(255, 0, 0); + chroma.hsl(0, 1, 0.5); + chroma.hsv(120, 0.5, 0.5); + chroma.lab(53.24, 80.09, 67.20); + chroma.lch(53.24, 104.55, 40); + chroma.gl(1, 0, 0); + + chroma.interpolate('white', 'black', 0) // #ffffff + chroma.interpolate('white', 'black', 1) // #000000 + chroma.interpolate('white', 'black', 0.5) // #7f7f7f + chroma.interpolate('white', 'black', 0.5, 'hsv') // #808080 + chroma.interpolate('white', 'black', 0.5, 'lab') // #777777 + + chroma.interpolate('rgba(0,0,0,0)', 'rgba(255,0,0,1)', 0.5).css() //"rgba(127.5,0,0,0.5)" + + var bezInterpolator = chroma.interpolate.bezier(['white', 'yellow', 'red', 'black']); + bezInterpolator(0).hex() // #ffffff + bezInterpolator(0.33).hex() // #ffcc67 + bezInterpolator(0.66).hex() // #b65f1a + bezInterpolator(1).hex() // #000000 + + chroma.luminance('black') // 0 + chroma.luminance('white') // 1 + chroma.luminance('#ff0000') // 0.2126 + + chroma.contrast('white', 'navy') // 16.00 – ok + chroma.contrast('white', 'yellow') // 1.07 – not ok! +} + +function test_color() { + chroma('red').hex() // "#FF0000"" + chroma('red').rgb() // [255, 0, 0] + chroma('red').hsv() // [0, 1, 1] + chroma('red').hsl() // [0, 1, 0.5] + chroma('red').lab() // [53.2407, 80.0924, 67.2031] + chroma('red').lch() // [53.2407, 104.5517, 39.9990] + chroma('red').rgba() // [255, 0, 0, 1] + chroma('red').css() // "rgb(255,0,0)" + chroma('red').alpha(0.7).css() // "rgba(255,0,0,0.7)" + chroma('red').css('hsl') // "hsl(0,100%,50%)" + chroma('red').alpha(0.7).css('hsl') // "hsla(0,100%,50%,0.7)" + chroma('blue').css('hsla') // "hsla(240,100%,50%,1)" + + var red = chroma('red'); + red.alpha(0.5); + red.css(); // rgba(255,0,0,0.5); + + chroma('red').darken().hex() // #BC0000 + chroma('red').brighten().hex() // #FF603B + chroma('#eecc99').saturate().hex() // #fcc973 + chroma('red').desaturate().hex() // #ec3d23 + + chroma('black').luminance() // 0 + chroma('white').luminance() // 1 + chroma('red').luminance() // 0.2126 +} + +function test_scale() { + var scale = chroma.scale(['lightyellow', 'navy']); + scale(0.5); // #7F7FB0 + + chroma.scale('RdYlBu'); + + var col = scale(0.5); + col.hex(); // #7F7FB0 + col.rgb(); // [127.5, 127.5, 176] + + scale = chroma.scale(['lightyellow', 'navy']).out('hex'); + scale(0.5); // "#7F7FB0" + + var scale = chroma.scale(['lightyellow', 'navy']); + scale.mode('hsv')(0.5); // #54C08A + scale.mode('hsl')(0.5); // #31FF98 + scale.mode('lab')(0.5); // #967CB2 + scale.mode('lch')(0.5); // #D26662 + + var scale = chroma.scale(['lightyellow', 'navy']).domain([0, 400]); + scale(200); // #7F7FB0 + + var scale = chroma.scale(['lightyellow', 'navy']).domain([0, 100, 200, 300, 400]); + scale(98); // #7F7FB0 + scale(99); // #7F7FB0 + scale(100); // #AAAAC0 + scale(101); // #AAAAC0 + + chroma.scale(['#eee', '#900']).domain([0, 400], 7); + chroma.scale(['#eee', '#900']).domain([1, 1000000], 7, 'log'); + chroma.scale(['#eee', '#900']).domain([1, 1000000], 5, 'quantiles'); + chroma.scale(['#eee', '#900']).domain([1, 1000000], 5, 'k-means'); + chroma.scale(['white', 'red']).domain([0, 100], 4).domain() // [0, 25, 50, 75, 100] + + chroma.scale().range(['lightyellow', 'navy']); + + chroma.scale(['lightyellow', 'navy']).correctLightness(true); + + chroma.scale('RdYlGn').domain([0,1], 5).colors() +} diff --git a/chroma-js/chroma-js.d.ts b/chroma-js/chroma-js.d.ts new file mode 100644 index 000000000..94b32ae81 --- /dev/null +++ b/chroma-js/chroma-js.d.ts @@ -0,0 +1,317 @@ +// Type definitions for Chroma.js v0.5.6 +// Project: https://github.com/gka/chroma.js +// Definitions by: Sebastian Brückner +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/** + * Chroma.js is a tiny library for all kinds of color conversions and color scales. + */ +declare module Chroma { + + export interface ChromaStatic { + /** + * Creates a color from a string representation (as supported in CSS). + * + * @param color The string to convert to a color. + * @return the color object. + */ + (color: string): Color; + + /** + * Create a color in the specified color space using a, b and c as values. + * + * @param a + * @param b + * @param c + * @param colorSpace The color space to use (one of "rgb", "hsl", "hsv", "lab", "lch", "gl"). Defaults to "rgb". + * @return the color object. + */ + (a: number, b: number, c: number, colorSpace?: string): Color; + + /** + * Create a color in the specified color space using values. + * + * @param values An array of values (e.g. [r, g, b, a?]). + * @param colorSpace The color space to use (one of "rgb", "hsl", "hsv", "lab", "lch", "gl"). Defaults to "rgb". + * @return the color object. + */ + (values: number[], colorSpace?: string): Color; + + /** + * Create a color in the specified color space using a, b and c as values. + * + * @param a + * @param b + * @param c + * @param colorSpace The color space to use (one of "rgb", "hsl", "hsv", "lab", "lch", "gl"). Defaults to "rgb". + * @return the color object. + */ + color(a: number, b: number, c: number, colorSpace?: string): Color; + + /** + * Calculate the contrast ratio of two colors. + * + * @param color1 The first color. + * @param color2 The second color. + * @return the contrast ratio. + */ + contrast(color1: Color, color2: Color): number; + /** + * Calculate the contrast ratio of two colors. + * + * @param color1 The first color. + * @param color2 The second color. + * @return the contrast ratio. + */ + contrast(color1: Color, color2: string): number; + /** + * Calculate the contrast ratio of two colors. + * + * @param color1 The first color. + * @param color2 The second color. + * @return the contrast ratio. + */ + contrast(color1: string, color2: Color): number; + /** + * Calculate the contrast ratio of two colors. + * + * @param color1 The first color. + * @param color2 The second color. + * @return the contrast ratio. + */ + contrast(color1: string, color2: string): number; + + /** + * Create a color from a hex or string representation (as supported in CSS). + * + * This is an alias of chroma.hex(). + * + * @param color The string to convert to a color. + * @return the color object. + */ + css(color: string): Color; + + /** + * Create a color from a hex or string representation (as supported in CSS). + * + * This is an alias of chroma.css(). + * + * @param color The string to convert to a color. + * @return the color object. + */ + hex(color: string): Color; + + rgb(red: number, green: number, blue: number, alpha?: number): Color; + hsl(hue: number, saturation: number, lightness: number, alpha?: number): Color; + hsv(hue: number, saturation: number, value: number, alpha?: number): Color; + lab(lightness: number, a: number, b: number, alpha?: number): Color; + lch(lightness: number, chroma: number, hue: number, alpha?: number): Color; + gl(red: number, green: number, blue: number, alpha?: number): Color; + + interpolate: InterpolateFunction; + mix: InterpolateFunction; + + luminance(color: Color): number; + luminance(color: string): number; + + /** + * Creates a color scale using a pre-defined color scale. + * + * @param name The name of the color scale. + * @return the resulting color scale. + */ + scale(name: string): Scale; + + /** + * Creates a color scale function from the given set of colors. + * + * @param colors An Array of at least two color names or hex values. + * @return the resulting color scale. + */ + scale(colors?: string[]): Scale; + + scales: PredefinedScales; + } + + interface InterpolateFunction { + (color1: Color, color2: Color, f: number, mode?: string): Color; + (color1: Color, color2: string, f: number, mode?: string): Color; + (color1: string, color2: Color, f: number, mode?: string): Color; + (color1: string, color2: string, f: number, mode?: string): Color; + + bezier(colors: any[]): (t: number) => Color; + } + + interface PredefinedScales { + [key: string]: Scale; + + cool: Scale; + hot: Scale; + } + + export interface Color { + /** + * Creates a color from a string representation (as supported in CSS). + * + * @param color The string to convert to a color. + */ + new(color: string): Color; + + /** + * Create a color in the specified color space using a, b and c as values. + * + * @param a + * @param b + * @param c + * @param colorSpace The color space to use (one of "rgb", "hsl", "hsv", "lab", "lch", "gl"). Defaults to "rgb". + */ + new(a: number, b: number, c: number, colorSpace?: string): Color; + + /** + * Create a color in the specified color space using a, b and c as color values and alpha as the alpha value. + * + * @param a + * @param b + * @param c + * @param alpha The alpha value of the color. + * @param colorSpace The color space to use (one of "rgb", "hsl", "hsv", "lab", "lch", "gl"). Defaults to "rgb". + */ + new(a: number, b: number, c: number, alpha: number, colorSpace?: string): Color; + + /** + * Create a color in the specified color space using values. + * + * @param values An array of values (e.g. [r, g, b, a?]). + * @param colorSpace The color space to use (one of "rgb", "hsl", "hsv", "lab", "lch", "gl"). Defaults to "rgb". + */ + new(values: number[], colorSpace: string): Color; + + /** + * Convert this color to CSS hex representation. + * + * @return this color's hex representation. + */ + hex(): string; + + /** + * @return the relative luminance of the color, which is a value between 0 (black) and 1 (white). + */ + luminance(): number; + + /** + * @return the X11 name of this color or its hex value if it does not have a name. + */ + name(): string; + + /** + * @return the alpha value of the color. + */ + alpha(): number; + + /** + * Set the alpha value. + * + * @param alpha The alpha value. + * @return this + */ + alpha(alpha: number): Color; + + css(mode?: string): string; + + interpolate(color: Color, f: number, mode?: string): Color; + interpolate(color: string, f: number, mode?: string): Color; + + premultiply(): Color; + + rgb(): number[]; + rgba(): number[]; + hsl(): number[]; + hsv(): number[]; + lab(): number[]; + lch(): number[]; + hsi(): number[]; + gl(): number[]; + + darken(amount?: number): Color; + darker(amount: number): Color; + brighten(amount?: number): Color; + brighter(amount: number): Color; + saturate(amount?: number): Color; + desaturate(amount?: number): Color; + + toString(): string; + } + + export interface Scale { + /** + * Interpolate a color using the currently set range and domain. + * + * @param value The value to use for interpolation. + * @return the interpolated hex color OR a Color object (depending on the mode set on this Scale). + */ + (value: number): any; + + /** + * Retreive all possible colors generated by this scale if it has distinct classes. + * + * @param mode The output mode to use. Must be one of Color's getters. Defaults to "hex". + * @return an array of colors in the type specified by mode. + */ + colors(mode?: string): any[]; + + correctLightness(): boolean; + + /** + * Enable or disable automatic lightness correction of this scale. + * + * @param Whether to enable or disable automatic lightness correction. + * @return this + */ + correctLightness(enable: boolean): Scale; + + /** + * Get the current domain. + * + * @return The current domain. + */ + domain(): number[]; + + /** + * Set the domain. + * + * @param domain An Array of at least two numbers (min and max). + * @param classes The number of fixed classes to create between min and max. + * @param mode The scale to use. Examples: log, quantiles, k-means. + * @return this + */ + domain(domain: number[], classes?: number, mode?: string): Scale; + + /** + * Specify in which color space the colors should be interpolated. Defaults to "rgb". + * You can use any of the following spaces: rgb, hsv, hsl, lab, lch + * + * @param colorSpace The color space to use for interpolation. + * @return this + */ + mode(colorSpace: string): Scale; + + /** + * Set the output mode of this Scale. + * + * @param mode The output mode to use. Must be one of Color's getters. + * @return this + */ + out(mode: string): Scale; + + /** + * Set the color range after initialization. + * + * @param colors An Array of at least two color names or hex values. + * @return this + */ + range(colors: string[]): Scale; + } + +} + +declare var chroma: Chroma.ChromaStatic;