[color] update types for color package to 2.0 (#18389)

* create types for color package

* Fix Color class to interface

types/color/color-tests.ts

@@ -1,41 +1,43 @@
-import * as Color from "color"
+import Color = require('color');
 
-var color: Color.Color = Color("white")
-var colorOther: Color.Color = Color("black")
-var colorRGB: Color.Color = Color({ r : 0, g : 0, b : 0 }, "rgb")
-var colorInt: Color.Color = Color(0x000000)
+const color: Color = new Color("white");
+const colorOther: Color = new Color("black");
+const colorRGB: Color = new Color({ r: 0, g: 0, b: 0 }, "rgb");
+const colorInt: Color = new Color(0x000000);
+const colorWithoutNew: Color = Color(0x000000);
+const colorByStaticMethod: Color = Color.rgb({ r: 0, g: 0, b: 0 });
 
-var hex: string = color.hex()
-var percent: string = color.percentString()
-var keyword: string | void = color.keyword()
-var alpha: number = color.alpha()
-var red: number = color.red()
-var green: number = color.green()
-var blue: number = color.blue()
-var hue: number = color.hue()
-var saturationl: number = color.saturationl()
-var lightness: number = color.lightness()
-var saturationv: number = color.saturationv()
-var value: number = color.value()
-var cyan: number = color.cyan()
-var magenta: number = color.magenta()
-var yellow: number = color.yellow()
-var black: number = color.black()
-var luminosity: number = color.luminosity()
-var contrast: number = color.contrast(colorOther)
-var dark: boolean = color.dark()
-var light: boolean = color.light()
-var level: string = color.level(colorOther)
+const hex: string = color.hex();
+const percent: string = color.percentString();
+const keyword: string = color.keyword();
+const alpha: number = color.alpha();
+const red: number = color.red();
+const green: number = color.green();
+const blue: number = color.blue();
+const hue: number = color.hue();
+const saturationl: number = color.saturationl();
+const lightness: number = color.lightness();
+const saturationv: number = color.saturationv();
+const value: number = color.value();
+const cyan: number = color.cyan();
+const magenta: number = color.magenta();
+const yellow: number = color.yellow();
+const black: number = color.black();
+const luminosity: number = color.luminosity();
+const contrast: number = color.contrast(colorOther);
+const dark: boolean = color.dark();
+const light: boolean = color.light();
+const level: string = color.level(colorOther);
 
-var x: number = color.x()
-var y: number = color.y()
-var z: number = color.z()
-var l: number = color.l()
-var a: number = color.a()
-var b: number = color.b()
-var rgbNumber: number = color.rgbNumber()
+const x: number = color.x();
+const y: number = color.y();
+const z: number = color.z();
+const l: number = color.l();
+const a: number = color.a();
+const b: number = color.b();
+const rgbNumber: number = color.rgbNumber();
 
-var chain: Color.Color = color
+const chain: Color = color
     .alpha(0)
     .red(0)
     .green(0)
@@ -54,7 +56,7 @@ var chain: Color.Color = color
     .darken(0)
     .saturate(0)
     .desaturate(0)
-    .greyscale()
+    .grayscale()
     .whiten(0)
     .blacken(0)
     .opaquer(0)

types/color/index.d.ts

@@ -1,101 +1,135 @@
-// Type definitions for color 1.0
-// Project: https://www.npmjs.com/package/color
-// Definitions by: Karol Janyst <https://github.com/LKay>
+// Type definitions for color 2.0
+// Project: https://github.com/qix-/color#readme
+// Definitions by: Junyoung Clare Jang <https://github.com/Airlun>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.3
 
-declare namespace Color {
+import convert = require('color-convert');
 
-    type ColorParam = string | { [param: string]: number } | number;
+type ColorParam = Color | string | ArrayLike<number> | number | { [key: string]: any };
 
-    type ColorModel = "rgb" | "hsl" | "hsv" | "hwb" | "hcg" | "cmyk" | "xyz" | "lab" | "hex" | "gray" | "keyword";
+interface Color {
+    toString(): string;
+    toJSON(): Color;
+    string(places?: number): string;
+    percentString(places?: number): string;
+    array(): number[];
+    object(): { alpha?: number } & { [key: string]: number };
+    unitArray(): number[];
+    unitObject(): { r: number, g: number, b: number, alpha?: number };
+    round(places?: number): Color;
+    alpha(): number;
+    alpha(val: number): Color;
+    red(): number;
+    red(val: number): Color;
+    green(): number;
+    green(val: number): Color;
+    blue(): number;
+    blue(val: number): Color;
+    hue(): number;
+    hue(val: number): Color;
+    saturationl(): number;
+    saturationl(val: number): Color;
+    lightness(): number;
+    lightness(val: number): Color;
+    saturationv(): number;
+    saturationv(val: number): Color;
+    value(): number;
+    value(val: number): Color;
+    chroma(): number;
+    chroma(val: number): Color;
+    gray(): number;
+    gray(val: number): Color;
+    white(): number;
+    white(val: number): Color;
+    wblack(): number;
+    wblack(val: number): Color;
+    cyan(): number;
+    cyan(val: number): Color;
+    magenta(): number;
+    magenta(val: number): Color;
+    yellow(): number;
+    yellow(val: number): Color;
+    black(): number;
+    black(val: number): Color;
+    x(): number;
+    x(val: number): Color;
+    y(): number;
+    y(val: number): Color;
+    z(): number;
+    z(val: number): Color;
+    l(): number;
+    l(val: number): Color;
+    a(): number;
+    a(val: number): Color;
+    b(): number;
+    b(val: number): Color;
+    keyword(): string;
+    keyword(val: string): Color;
+    hex(): string;
+    hex(val: string): Color;
+    rgbNumber(): number;
+    luminosity(): number;
+    contrast(color2: Color): number;
+    level(color2: Color): 'AAA' | 'AA' | '';
+    dark(): boolean;
+    light(): boolean;
+    negate(): Color;
+    lighten(ratio: number): Color;
+    darken(ratio: number): Color;
+    saturate(ratio: number): Color;
+    desaturate(ratio: number): Color;
+    whiten(ratio: number): Color;
+    blacken(ratio: number): Color;
+    grayscale(): Color;
+    fade(ratio: number): Color;
+    opaquer(ratio: number): Color;
+    rotate(degrees: number): Color;
+    mix(mixinColor: Color, weight?: number): Color;
 
-    interface Color {
-        (color: ColorParam | Color, model?: ColorModel) : Color;
-        toString(): string;
-        toJSON(): any;
-        string(places?: number): string;
-        percentString(placse?: number): string;
-        array(): number[];
-        object(): any;
-        unitArray(): any[];
-        unitObject(): any;
-        round(places?: number): Color;
-        alpha(alpha: number): Color;
-        alpha(): number;
-        red(red: number): Color;
-        red(): number;
-        green(green: number): Color;
-        green(): number;
-        blue(blue: number): Color;
-        blue(): number;
-        hue(hue: number): Color;
-        hue(): number;
-        saturationl(saturation: number): Color;
-        saturationl(): number;
-        lightness(lightness: number): Color;
-        lightness(): number;
-        saturationv(saturationv: number): Color;
-        saturationv(): number;
-        value(value: number): Color;
-        value(): number;
-        chroma(chroma: number): Color;
-        chroma(): number;
-        gray(value: number): Color;
-        gray(): number;
-        cyan(cyan: number): Color;
-        cyan(): number;
-        magenta(magenta: number): Color;
-        magenta(): number;
-        yellow(yellow: number): Color;
-        yellow(): number;
-        black(black: number): Color;
-        black(): number;
-        x(x: number): Color;
-        x(): number;
-        y(y: number): Color;
-        y(): number;
-        z(z: number): Color;
-        z(): number;
-        l(l: number): Color;
-        l(): number;
-        a(a: number): Color;
-        a(): number;
-        b(b: number): Color;
-        b(): number;
-        keyword(keyword: string): Color;
-        keyword(): string | undefined;
-        hex(color: string): Color;
-        hex(): string;
-        rgb(): Color;
-        hsl(): Color;
-        hsv(): Color;
-        hwb(): Color;
-        hcg(): Color;
-        cmyk(): Color;
-        xyz(): Color;
-        lab(): Color;
-        rgbNumber(): number;
-        luminosity(): number;
-        contrast(color: Color): number;
-        level(color: Color): string;
-        dark(): boolean;
-        light(): boolean;
-        negate(): Color;
-        lighten(value: number): Color;
-        darken(value: number): Color;
-        saturate(value: number): Color;
-        desaturate(value: number): Color;
-        whiten(value: number): Color;
-        blacken(value: number): Color;
-        greyscale(): Color;
-        fade(ratio: number): Color;
-        opaquer(value: number): Color;
-        rotate(value: number): Color;
-        mix(color: Color, value?: number): Color;
-        hsl(): Color;
-    }
+    rgb(...args: number[]): Color;
+    hsl(...args: number[]): Color;
+    hsv(...args: number[]): Color;
+    hwb(...args: number[]): Color;
+    cmyk(...args: number[]): Color;
+    xyz(...args: number[]): Color;
+    lab(...args: number[]): Color;
+    lch(...args: number[]): Color;
+    ansi16(...args: number[]): Color;
+    ansi256(...args: number[]): Color;
+    hcg(...args: number[]): Color;
+    apple(...args: number[]): Color;
 }
 
-declare const Color: Color.Color;
+interface ColorConstructor {
+    (obj?: ColorParam, model?: keyof (typeof convert)): Color;
+    new(obj?: ColorParam, model?: keyof (typeof convert)): Color;
+    rgb(...val: number[]): Color;
+    rgb(color: ColorParam): Color;
+    hsl(...val: number[]): Color;
+    hsl(color: ColorParam): Color;
+    hsv(...val: number[]): Color;
+    hsv(color: ColorParam): Color;
+    hwb(...val: number[]): Color;
+    hwb(color: ColorParam): Color;
+    cmyk(...val: number[]): Color;
+    cmyk(color: ColorParam): Color;
+    xyz(...val: number[]): Color;
+    xyz(color: ColorParam): Color;
+    lab(...val: number[]): Color;
+    lab(color: ColorParam): Color;
+    lch(...val: number[]): Color;
+    lch(color: ColorParam): Color;
+    ansi16(...val: number[]): Color;
+    ansi16(color: ColorParam): Color;
+    ansi256(...val: number[]): Color;
+    ansi256(color: ColorParam): Color;
+    hcg(...val: number[]): Color;
+    hcg(color: ColorParam): Color;
+    apple(...val: number[]): Color;
+    apple(color: ColorParam): Color;
+}
+
+declare const Color: ColorConstructor;
+
 export = Color;
-export as namespace Color;

types/color/tsconfig.json

@@ -19,4 +19,4 @@
         "index.d.ts",
         "color-tests.ts"
     ]
-}
+}

types/color/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }

types/color/v1/color-tests.ts

@@ -0,0 +1,63 @@
+import * as Color from "color"
+
+var color: Color.Color = Color("white")
+var colorOther: Color.Color = Color("black")
+var colorRGB: Color.Color = Color({ r : 0, g : 0, b : 0 }, "rgb")
+var colorInt: Color.Color = Color(0x000000)
+
+var hex: string = color.hex()
+var percent: string = color.percentString()
+var keyword: string | void = color.keyword()
+var alpha: number = color.alpha()
+var red: number = color.red()
+var green: number = color.green()
+var blue: number = color.blue()
+var hue: number = color.hue()
+var saturationl: number = color.saturationl()
+var lightness: number = color.lightness()
+var saturationv: number = color.saturationv()
+var value: number = color.value()
+var cyan: number = color.cyan()
+var magenta: number = color.magenta()
+var yellow: number = color.yellow()
+var black: number = color.black()
+var luminosity: number = color.luminosity()
+var contrast: number = color.contrast(colorOther)
+var dark: boolean = color.dark()
+var light: boolean = color.light()
+var level: string = color.level(colorOther)
+
+var x: number = color.x()
+var y: number = color.y()
+var z: number = color.z()
+var l: number = color.l()
+var a: number = color.a()
+var b: number = color.b()
+var rgbNumber: number = color.rgbNumber()
+
+var chain: Color.Color = color
+    .alpha(0)
+    .red(0)
+    .green(0)
+    .blue(0)
+    .hue(0)
+    .saturationl(0)
+    .lightness(0)
+    .saturationv(0)
+    .value(0)
+    .cyan(0)
+    .magenta(0)
+    .yellow(0)
+    .black(0)
+    .negate()
+    .lighten(0)
+    .darken(0)
+    .saturate(0)
+    .desaturate(0)
+    .greyscale()
+    .whiten(0)
+    .blacken(0)
+    .opaquer(0)
+    .rotate(0)
+    .mix(colorOther, 0)
+    .hsl();

types/color/v1/index.d.ts

@@ -0,0 +1,101 @@
+// Type definitions for color 1.0
+// Project: https://www.npmjs.com/package/color
+// Definitions by: Karol Janyst <https://github.com/LKay>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+declare namespace Color {
+
+    type ColorParam = string | { [param: string]: number } | number;
+
+    type ColorModel = "rgb" | "hsl" | "hsv" | "hwb" | "hcg" | "cmyk" | "xyz" | "lab" | "hex" | "gray" | "keyword";
+
+    interface Color {
+        (color: ColorParam | Color, model?: ColorModel) : Color;
+        toString(): string;
+        toJSON(): any;
+        string(places?: number): string;
+        percentString(placse?: number): string;
+        array(): number[];
+        object(): any;
+        unitArray(): any[];
+        unitObject(): any;
+        round(places?: number): Color;
+        alpha(alpha: number): Color;
+        alpha(): number;
+        red(red: number): Color;
+        red(): number;
+        green(green: number): Color;
+        green(): number;
+        blue(blue: number): Color;
+        blue(): number;
+        hue(hue: number): Color;
+        hue(): number;
+        saturationl(saturation: number): Color;
+        saturationl(): number;
+        lightness(lightness: number): Color;
+        lightness(): number;
+        saturationv(saturationv: number): Color;
+        saturationv(): number;
+        value(value: number): Color;
+        value(): number;
+        chroma(chroma: number): Color;
+        chroma(): number;
+        gray(value: number): Color;
+        gray(): number;
+        cyan(cyan: number): Color;
+        cyan(): number;
+        magenta(magenta: number): Color;
+        magenta(): number;
+        yellow(yellow: number): Color;
+        yellow(): number;
+        black(black: number): Color;
+        black(): number;
+        x(x: number): Color;
+        x(): number;
+        y(y: number): Color;
+        y(): number;
+        z(z: number): Color;
+        z(): number;
+        l(l: number): Color;
+        l(): number;
+        a(a: number): Color;
+        a(): number;
+        b(b: number): Color;
+        b(): number;
+        keyword(keyword: string): Color;
+        keyword(): string | undefined;
+        hex(color: string): Color;
+        hex(): string;
+        rgb(): Color;
+        hsl(): Color;
+        hsv(): Color;
+        hwb(): Color;
+        hcg(): Color;
+        cmyk(): Color;
+        xyz(): Color;
+        lab(): Color;
+        rgbNumber(): number;
+        luminosity(): number;
+        contrast(color: Color): number;
+        level(color: Color): string;
+        dark(): boolean;
+        light(): boolean;
+        negate(): Color;
+        lighten(value: number): Color;
+        darken(value: number): Color;
+        saturate(value: number): Color;
+        desaturate(value: number): Color;
+        whiten(value: number): Color;
+        blacken(value: number): Color;
+        greyscale(): Color;
+        fade(ratio: number): Color;
+        opaquer(value: number): Color;
+        rotate(value: number): Color;
+        mix(color: Color, value?: number): Color;
+        hsl(): Color;
+    }
+}
+
+declare const Color: Color.Color;
+export = Color;
+export as namespace Color;

types/color/v1/tsconfig.json

@@ -0,0 +1,27 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "baseUrl": "../../",
+        "typeRoots": [
+            "../../"
+        ],
+        "types": [],
+        "paths": {
+            "color": [
+                "color/v1"
+            ]
+        },
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "color-tests.ts"
+    ]
+}