kylefang/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/zhigang1992/DefinitelyTyped.git synced 2026-04-23 12:56:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2688 from invliD/chroma-js

Browse Source 
Added Chroma.js definitions
This commit is contained in:
Masahiro Wakame
2014-08-20 13:38:18 +09:00
parent 834ee646f2 10ba3e4655
commit dc03a6e5d9
3 changed files with 438 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CONTRIBUTORS.md
View File

@@ -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))

120
chroma-js/chroma-js-tests.ts Normal file
View File

@@ -0,0 +1,120 @@
/// <reference path="chroma-js.d.ts" />
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()
}

317
chroma-js/chroma-js.d.ts vendored Normal file
View File

@@ -0,0 +1,317 @@
// Type definitions for Chroma.js v0.5.6
// Project: https://github.com/gka/chroma.js
// Definitions by: Sebastian Brückner <https://github.com/invliD>
// 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;