diff --git a/types/src/index.d.ts b/types/src/index.d.ts index 665838cbc..c6ce9d232 100644 --- a/types/src/index.d.ts +++ b/types/src/index.d.ts @@ -18,7 +18,7 @@ import deltaEMethods, { deltaEITP, deltaEOK, } from "./deltaE/index"; -import { mix, range, steps } from "./interpolation"; +import { range, Range, MixOptions, StepsOptions } from "./interpolation"; import { getLuminance } from "./luminance"; import { lighten, darken } from "./variations"; @@ -67,12 +67,31 @@ declare module "./color" { static deltaEMethods: typeof deltaEMethods; // interpolation - mix: ToColorPrototype; + // These signatures should always match those in interpolation.d.ts, + // including the static versions + mix(color2: ColorTypes, options?: MixOptions): Color; + mix(color2: ColorTypes, p: number, options?: MixOptions): Color; range: ToColorPrototype; - steps: ToColorPrototype; - static mix: typeof mix; + steps(color2: ColorTypes, options?: StepsOptions): Color[]; + + static mix( + color1: ColorTypes, + color2: ColorTypes, + options?: MixOptions + ): Color; + static mix( + color1: ColorTypes, + color2: ColorTypes, + p: number, + options?: MixOptions + ): Color; static range: typeof range; - static steps: typeof steps; + static steps( + color1: ColorTypes, + color2: ColorTypes, + options?: StepsOptions + ): Color[]; + static steps(range: Range, options?: StepsOptions): Color[]; // luminance get luminance(): ReturnType; diff --git a/types/test/interpolation.ts b/types/test/interpolation.ts index 321237399..c7f6554e1 100644 --- a/types/test/interpolation.ts +++ b/types/test/interpolation.ts @@ -1,4 +1,4 @@ -import Color from "colorjs.io/src/color"; +import Color from "colorjs.io/src"; import { sRGB, sRGB_Linear } from "colorjs.io/src/index-fn"; import { isRange, @@ -47,6 +47,16 @@ mix("red", "blue", { premultiplied: true, }); +// Test mix on Color class +Color.mix("red", "blue"); // $ExpectType Color +Color.mix("red", "blue", 123); // $ExpectType Color +Color.mix("red", "blue", { space: "srgb" }); // $ExpectType Color +Color.mix("red", "blue", 123, { space: "srgb" }); // $ExpectType Color +new Color("red").mix("blue"); // $ExpectType Color +new Color("red").mix("blue", 123); // $ExpectType Color +new Color("red").mix("blue", { space: "srgb" }); // $ExpectType Color +new Color("red").mix("blue", 123, { space: "srgb" }); // $ExpectType Color + steps("red", "blue"); // $ExpectType PlainColorObject[] // $ExpectType PlainColorObject[] steps("red", "blue", { @@ -64,6 +74,11 @@ steps(r, { maxSteps: 100, }); +// Test steps on Color class +Color.steps(Color.range("red", "blue")); // $ExpectType Color[] +Color.steps("red", "blue"); // $ExpectType Color[] +new Color("red").steps("blue"); // $ExpectType Color[] + // @ts-expect-error steps(r, "blue"); // $ExpectType PlainColorObject[]