Add a PlainColorObject type for functions that return color objects

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/display.d.ts

@@ -1,7 +1,7 @@
-import Color, { ColorObject, ColorTypes } from "./color";
+import { PlainColorObject, ColorTypes } from "./color";
 import ColorSpace from "./space";
 
-export type Display = string & { color: ColorObject };
+export type Display = string & { color: PlainColorObject };
 
 export default function display(
 	color: ColorTypes,

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