[types] Fix signature of steps and mix functions (#323)

* [types] Fix signature of `steps` function * [types] Fix `steps` and `mix` signatures to properly reflect code
color-js · Aug 21, 2023 · b2896f4 · b2896f4
1 parent 2bd19b0
commit b2896f4
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 6 deletions.
diff --git 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<typeof mix>;
+		// 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<typeof range>;
-		steps: ToColorPrototype<typeof steps>;
-		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<typeof getLuminance>;

diff --git 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[]