Add a PlainColorObject type for functions that return color objects

The ColorObject type has optional properties and doesn't
accurately reflect the color object type returned by
functions such as getColor() which ensures that the object
returned has space, coords and alpha properties that are
not undefined.

A new interface called PlainColorObject has been introduced
to represent fully formed color objects.

The Color class implements the PlainColorObject interface
so the Color class was removed from list of types in the
ColorTypes type.

types/src/clone.d.ts

@@ -1,3 +1,3 @@
-import Color from "./color";
+import { PlainColorObject } from "./color";
 
-export default function clone(color: Color): Color;
+export default function clone(color: PlainColorObject): PlainColorObject;

types/src/color.d.ts

@@ -28,13 +28,19 @@ export interface ColorObject {
 	alpha?: number | undefined;
 }
 
+export interface PlainColorObject {
+	space: ColorSpace;
+	coords: Coords;
+	alpha: number;
+}
+
 export interface ColorConstructor {
 	spaceId: string;
 	coords: Coords;
 	alpha: number | undefined;
 }
 
-export type ColorTypes = Color | ColorObject | ColorConstructor | string;
+export type ColorTypes = ColorObject | ColorConstructor | string | PlainColorObject;
 
 export type DefineFunctionCode = (...args: any[]) => any;
 
@@ -79,7 +85,7 @@ declare namespace Color {
 	export const spaces: typeof ColorSpace["registry"];
 }
 
-declare class Color {
+declare class Color implements PlainColorObject {
 	constructor(color: ColorTypes);
 	constructor(space: string | ColorSpace, coords: Coords, alpha?: number);
 

types/src/getColor.d.ts

@@ -1,3 +1,3 @@
-import { ColorObject, ColorTypes } from "./color";
+import { PlainColorObject, ColorTypes } from "./color";
 
-export default function getColor(color: ColorTypes): ColorObject;
+export default function getColor(color: ColorTypes): PlainColorObject;

types/src/interpolation.d.ts

@@ -1,4 +1,4 @@
-import Color, { ColorTypes } from "./color";
+import Color, { ColorTypes, PlainColorObject } from "./color";
 import ColorSpace from "./space";
 import { Methods } from "./deltaE/index";
 
@@ -33,13 +33,13 @@ export function mix(
 	color1: ColorTypes,
 	color2: ColorTypes,
 	options?: MixOptions
-): number;
+): PlainColorObject;
 export function mix(
 	color1: ColorTypes,
 	color2: ColorTypes,
 	p: number,
 	options?: MixOptions
-): number;
+): PlainColorObject;
 
 export interface StepsOptions extends RangeOptions {
 	maxDeltaE?: number | undefined;
@@ -48,7 +48,7 @@ export interface StepsOptions extends RangeOptions {
 	maxSteps?: number | undefined;
 }
 
-export function steps(color1: ColorTypes, color2: ColorTypes, options?: StepsOptions): Color[];
-export function steps(range: Range, options?: StepsOptions): Color[];
+export function steps(color1: ColorTypes, color2: ColorTypes, options?: StepsOptions): PlainColorObject[];
+export function steps(range: Range, options?: StepsOptions): PlainColorObject[];
 
 export function register(color: typeof Color): void;

types/src/to.d.ts

@@ -1,4 +1,4 @@
-import { ColorObject, ColorTypes } from "./color";
+import { PlainColorObject, ColorTypes } from "./color";
 import ColorSpace from "./space";
 
 declare namespace to {
@@ -9,6 +9,6 @@ declare function to(
 	color: ColorTypes,
 	space: string | ColorSpace,
 	options?: { inGamut?: boolean | undefined }
-): ColorObject;
+): PlainColorObject;
 
 export default to;

types/src/toGamut.d.ts

@@ -1,16 +1,16 @@
-import Color, { ColorObject } from "./color";
+import { ColorTypes, PlainColorObject } from "./color";
 import ColorSpace from "./space";
 
 declare namespace toGamut {
 	let returns: "color";
 }
 
-declare function toGamut<T extends Color | ColorObject>(
-	color: T,
+declare function toGamut(
+	color: ColorTypes,
 	options?: {
 		method?: string | undefined;
 		space?: string | ColorSpace | undefined;
 	}
-): T;
+): PlainColorObject;
 
 export default toGamut;

types/src/variations.d.ts

@@ -1,5 +1,5 @@
-import Color, { ColorTypes } from "./color";
+import { PlainColorObject, ColorTypes } from "./color";
 
-export function lighten(color: ColorTypes, amount?: number): Color;
+export function lighten(color: ColorTypes, amount?: number): PlainColorObject;
 
-export function darken(color: ColorTypes, amount?: number): Color;
+export function darken(color: ColorTypes, amount?: number): PlainColorObject;

types/test/clone.ts

@@ -1,7 +1,14 @@
 import Color from "colorjs.io/src/color";
 import clone from "colorjs.io/src/clone";
+import { sRGB } from "colorjs.io/src/spaces/index-fn";
 
 // @ts-expect-error
 clone();
 
-clone(new Color("red")); // $ExpectType Color
+clone(new Color("red")); // $ExpectType PlainColorObject
+// $ExpectType PlainColorObject
+clone({
+	space: sRGB,
+	coords: [0, 0, 0],
+	alpha: 1,
+});

types/test/interpolation.ts

@@ -36,27 +36,27 @@ mix();
 // @ts-expect-error
 mix("red");
 
-mix("red", "blue"); // $ExpectType number
-mix("red", "blue", 0.5); // $ExpectType number
-mix("red", "blue", {}); // $ExpectType number
-mix("red", "blue", 0.5, {}); // $ExpectType number
-// $ExpectType number
+mix("red", "blue"); // $ExpectType PlainColorObject
+mix("red", "blue", 0.5); // $ExpectType PlainColorObject
+mix("red", "blue", {}); // $ExpectType PlainColorObject
+mix("red", "blue", 0.5, {}); // $ExpectType PlainColorObject
+// $ExpectType PlainColorObject
 mix("red", "blue", {
 	space: "srgb",
 	outputSpace: "srgb_linear",
 	premultiplied: true,
 });
 
-steps("red", "blue"); // $ExpectType Color[]
-// $ExpectType Color[]
+steps("red", "blue"); // $ExpectType PlainColorObject[]
+// $ExpectType PlainColorObject[]
 steps("red", "blue", {
 	maxDeltaE: 1,
 	deltaEMethod: "2000",
 	steps: 10,
 	maxSteps: 100,
 });
-steps(r); // $ExpectType Color[]
-// $ExpectType Color[]
+steps(r); // $ExpectType PlainColorObject[]
+// $ExpectType PlainColorObject[]
 steps(r, {
 	maxDeltaE: 1,
 	deltaEMethod: "2000",
@@ -65,7 +65,7 @@ steps(r, {
 });
 
 // @ts-expect-error
-steps(r, "blue"); // $ExpectType Color[]
+steps(r, "blue"); // $ExpectType PlainColorObject[]
 
 // @ts-expect-error
 register();

types/test/to.ts

@@ -2,8 +2,9 @@ import to from "colorjs.io/src/to";
 
 // @ts-expect-error
 to();
+
 // @ts-expect-error
 to("red");
 
-to("red", "srgb"); // $ExpectType ColorObject
-to("red", "srgb", { inGamut: false }); // $ExpectType ColorObject
+to("red", "srgb"); // $ExpectType PlainColorObject
+to("red", "srgb", { inGamut: false }); // $ExpectType PlainColorObject

types/test/toGamut.ts

@@ -4,9 +4,9 @@ import sRGB from "colorjs.io/src/spaces/srgb";
 
 // @ts-expect-error
 toGamut();
-// @ts-expect-error
-toGamut("red");
 
-toGamut(new Color("red")); // $ExpectType Color
-toGamut(new Color("red"), { method: "clip", space: "srgb" }); // $ExpectType Color
-toGamut(new Color("red"), { method: "clip", space: sRGB }); // $ExpectType Color
+toGamut("red"); // $ExpectType PlainColorObject
+
+toGamut(new Color("red")); // $ExpectType PlainColorObject
+toGamut(new Color("red"), { method: "clip", space: "srgb" }); // $ExpectType PlainColorObject
+toGamut(new Color("red"), { method: "clip", space: sRGB }); // $ExpectType PlainColorObject

types/test/variations.ts

@@ -4,13 +4,13 @@ import { lighten, darken } from "colorjs.io/src/variations";
 // @ts-expect-error
 lighten();
 
-lighten("red"); // $ExpectType Color
-lighten(new Color("red")); // $ExpectType Color
-lighten("red", 25); // $ExpectType Color
+lighten("red"); // $ExpectType PlainColorObject
+lighten(new Color("red")); // $ExpectType PlainColorObject
+lighten("red", 25); // $ExpectType PlainColorObject
 
 // @ts-expect-error
 darken();
 
-darken("red"); // $ExpectType Color
-darken(new Color("red")); // $ExpectType Color
-darken("red", 25); // $ExpectType Color
+darken("red"); // $ExpectType PlainColorObject
+darken(new Color("red")); // $ExpectType PlainColorObject
+darken("red", 25); // $ExpectType PlainColorObject