@oscarpalmer/atoms 0.189.0 → 0.190.0

package/src/color/instance.ts

@@ -1,270 +1,94 @@
 import {formatHslColor, formatHwbColor, formatRgbColor} from './misc';
 import {getAlpha} from './misc/alpha';
 import {getColorState, setHexColor, setHSLColor, setHWBColor, setRGBColor} from './misc/state';
-import type {
-	ColorState,
-	HSLAColor,
-	HSLColor,
-	HWBAColor,
-	HWBColor,
-	RGBAColor,
-	RGBColor,
-} from './models';
+import type {Color, ColorState} from './models';
 
 // #region Types
 
-/**
- * A color that is represented in multiple color formats
- */
-export class Color {
-	/**
-	 * A property to identify this as a Color instance, used for type checking
-	 *
-	 * @internal
-	 */
-	declare private readonly $color: boolean;
-
-	readonly #state: ColorState;
-
-	/**
-	 * Get the alpha channel _(opacity)_ of the color as a percentage between `0` and `100`
-	 *
-	 * @returns Current alpha channel value
-	 */
-	get alpha(): number {
-		return this.#state.alpha.value;
-	}
-
-	/**
-	 * Set the alpha channel _(opacity)_ of the color as a percentage between `0` and `100`
-	 *
-	 * @param value New alpha channel value
-	 */
-	set alpha(value: number) {
-		if (typeof value === 'number' && !Number.isNaN(value)) {
-			this.#state.alpha = getAlpha(value);
-		}
-	}
-
-	/**
-	 * Get the color as a hex color string
-	 *
-	 * _Hex color string is returned with no `#`-prefix or alpha channel (opacity)_
-	 *
-	 * @returns Current color as a hex color string
-	 */
-	get hex(): string {
-		return this.#state.hex;
-	}
-
-	/**
-	 * Set the color from a hex color string
-	 *
-	 * - `#`-prefix is optional
-	 * - Alpha channel _(opacity)_ will be ignored
-	 *
-	 * @param value New hex color string
-	 */
-	set hex(value: string) {
-		setHexColor(this.#state, value, false);
-	}
-
-	/**
-	 * Get the color as a hex color with an alpha channel _(opacity)_
-	 *
-	 * _Hex color string is returned with alpha channel (opacity), but without `#`-prefix_
-	 *
-	 * @returns Current color as a hex color string
-	 */
-	get hexa(): string {
-		return `${this.#state.hex}${this.#state.alpha.hex}`;
-	}
-
-	/**
-	 * Set the color from a hex color string with an alpha channel _(opacity)_
-	 *
-	 * - `#`-prefix is optional
-	 * - Alpha channel _(opacity)_ will be respected
-	 *
-	 * @param value New hex color string
-	 */
-	set hexa(value: string) {
-		setHexColor(this.#state, value, true);
-	}
-
-	/**
-	 * Get the color as an _HSL_ color
-	 *
-	 * @returns Current color as an _HSL_ color
-	 */
-	get hsl(): HSLColor {
-		return {...this.#state.hsl};
-	}
-
-	/**
-	 * Set colors from an _HSL_ color
-	 *
-	 * @param value New _HSL_ color
-	 */
-	set hsl(value: HSLColor) {
-		setHSLColor(this.#state, value, false);
-	}
-
-	/**
-	 * Get the color as an _HSLA_ color
-	 *
-	 * @returns Current color as an _HSLA_ color
-	 */
-	get hsla(): HSLAColor {
-		return {
-			...this.#state.hsl,
-			alpha: this.#state.alpha.value,
-		};
-	}
-
-	/**
-	 * Set colors and alpha from an _HSLA_ color
-	 *
-	 * @param value New _HSLA_ color
-	 */
-	set hsla(value: HSLAColor) {
-		setHSLColor(this.#state, value, true);
-	}
-
-	/**
-	 * Get the color as an _HWB_ color
-	 *
-	 * @returns Current color as an _HWB_ color
-	 */
-	get hwb(): HWBColor {
-		return {...this.#state.hwb};
-	}
-
-	/**
-	 * Set colors from an _HWB_ color
-	 *
-	 * @param value New _HWB_ color
-	 */
-	set hwb(value: HWBColor) {
-		setHWBColor(this.#state, value, false);
-	}
-
-	/**
-	 * Get the color as an _HWBA_ color
-	 *
-	 * @returns Current color as an _HWBA_ color
-	 */
-	get hwba(): HWBAColor {
-		return {
-			...this.#state.hwb,
-			alpha: this.#state.alpha.value,
-		};
-	}
-
-	/**
-	 * Set colors and alpha from an _HWBA_ color
-	 *
-	 * @param value New _HWBA_ color
-	 */
-	set hwba(value: HWBAColor) {
-		setHWBColor(this.#state, value, true);
-	}
-
-	/**
-	 * Get the color as an _RGB_ color
-	 *
-	 * @returns Current color as an _RGB_ color
-	 */
-	get rgb(): RGBColor {
-		return {...this.#state.rgb};
-	}
-
-	/**
-	 * Set colors from an _RGB_ color
-	 *
-	 * @param value New _RGB_ color
-	 */
-	set rgb(value: RGBColor) {
-		setRGBColor(this.#state, value, false);
-	}
-
-	/**
-	 * Get the color as an _RGBA_ color
-	 *
-	 * @returns Current color as an _RGBA_ color
-	 */
-	get rgba(): RGBAColor {
-		return {
-			...this.#state.rgb,
-			alpha: this.#state.alpha.value,
-		};
-	}
-
-	/**
-	 * Set colors and alpha from an _RGBA_ color
-	 *
-	 * @param value New _RGBA_ color
-	 */
-	set rgba(value: RGBAColor) {
-		setRGBColor(this.#state, value, true);
-	}
-
-	constructor(value: unknown) {
-		this.#state = getColorState(value);
-
-		Object.defineProperty(this, '$color', {
-			value: true,
-		});
-	}
-
-	/**
-	 * Get the color as a hex string
-	 *
-	 * @param alpha Include alpha channel _(opacity)_? _(defaults to `false`)_
-	 * @returns Hex color string
-	 */
-	toHexString(alpha?: boolean): string {
-		return `#${alpha === true ? this.hexa : this.hex}`;
-	}
+export function color(value: unknown): Color {
+	const state = getColorState(value);
+
+	const instance = {
+		toHexString: (alpha?: boolean) =>
+			`#${alpha === true ? (instance as Color).hexa : (instance as Color).hex}`,
+		toHslString: (alpha?: boolean) => formatHslColor(state, alpha === true),
+		toHwbString: (alpha?: boolean) => formatHwbColor(state, alpha === true),
+		toRgbString: (alpha?: boolean) => formatRgbColor(state, alpha === true),
+		toString: () => (instance as Color).toHexString(),
+	};
+
+	Object.defineProperties(instance, {
+		$color: {
+			enumerable: false,
+			get: () => true,
+		},
+		alpha: {
+			enumerable: true,
+			get: () => state.alpha.value,
+			set: (value: number) => {
+				if (typeof value === 'number' && !Number.isNaN(value)) {
+					state.alpha = getAlpha(value);
+				}
+			},
+		},
+		hex: getProperty('hex', state, false),
+		hexa: getProperty('hex', state, true),
+		hsl: getProperty('hsl', state, false),
+		hsla: getProperty('hsl', state, true),
+		hwb: getProperty('hwb', state, false),
+		hwba: getProperty('hwb', state, true),
+		rgb: getProperty('rgb', state, false),
+		rgba: getProperty('rgb', state, true),
+	});
+
+	return Object.freeze(instance) as Color;
+}
 
-	/**
-	 * Get the color as an _HSL(A)_ string
-	 *
-	 * @param alpha Include alpha channel _(opacity)_? _(defaults to `false`)_
-	 * @returns _HSL(A)_ color string
-	 */
-	toHslString(alpha?: boolean): string {
-		return formatHslColor(this, alpha === true);
-	}
+function getHex(state: ColorState, alpha: boolean): string {
+	return alpha ? `${state.hex}${state.alpha.hex}` : state.hex;
+}
 
-	/**
-	 * Get the color as an _HWB(A)_ string
-	 *
-	 * @param alpha Include alpha channel _(opacity)_? _(defaults to `false`)_
-	 * @returns _HWB(A)_ color string
-	 */
-	toHwbString(alpha?: boolean): string {
-		return formatHwbColor(this, alpha === true);
-	}
+function getProperty(
+	space: keyof typeof setters,
+	state: ColorState,
+	alpha: boolean,
+): PropertyDescriptor {
+	const setter = setters[space];
+
+	return {
+		enumerable: true,
+		get: () => {
+			const value = state[space];
+
+			if (typeof value === 'string') {
+				return getHex(state, alpha);
+			}
+
+			return alpha
+				? {
+						...value,
+						alpha: state.alpha.value,
+					}
+				: {...value};
+		},
+		set: (value: unknown) => {
+			setter(state, value, alpha);
+		},
+	};
+}
 
-	/**
-	 * Get the color as an _RGB(A)_ string
-	 *
-	 * @param alpha Include alpha channel _(opacity)_? _(defaults to `false`)_
-	 * @returns _RGB(A)_ color string
-	 */
-	toRgbString(alpha?: boolean): string {
-		return formatRgbColor(this, alpha === true);
-	}
+// #endregion
 
-	/**
-	 * Get the color as a hex color string
-	 *
-	 * @returns Hex color string
-	 */
-	toString(): string {
-		return this.toHexString();
-	}
-}
+// #region Variables
+
+const setters: Record<
+	'hex' | 'hsl' | 'hwb' | 'rgb',
+	(state: ColorState, value: any, alpha: boolean) => void
+> = {
+	hex: setHexColor,
+	hsl: setHSLColor,
+	hwb: setHWBColor,
+	rgb: setRGBColor,
+};
 
 // #endregion

package/src/color/misc/get.ts

@@ -16,8 +16,8 @@ import {
 	SRGB_LUMINANCE_RED,
 	SRGB_LUMINANCE_THRESHOLD,
 } from '../constants';
-import {Color} from '../instance';
-import type {HSLAColor, HSLColor, HWBAColor, HWBColor, RGBAColor, RGBColor} from '../models';
+import {color} from '../instance';
+import type {Color, HSLAColor, HSLColor, HWBAColor, HWBColor, RGBAColor, RGBColor} from '../models';
 import {getColorState} from './state';
 
 // #region Functions
@@ -79,9 +79,9 @@ export function getForegroundColor(value: unknown, hex?: unknown): string | Colo
 		SRGB_LUMINANCE_BLUE * values[0];
 
 	// Rudimentary and ureliable?; implement APCA for more reliable results?
-	const color = luminance > SRGB_LUMINANCE_THRESHOLD ? HEX_BLACK : HEX_WHITE;
+	const foreground = luminance > SRGB_LUMINANCE_THRESHOLD ? HEX_BLACK : HEX_WHITE;
 
-	return hex === true ? color : new Color(color);
+	return hex === true ? foreground : color(foreground);
 }
 
 /**

package/src/color/misc/index.ts

@@ -1,28 +1,27 @@
-import {round} from '../../internal/math/misc';
-import type {Color} from '../instance';
+import type {ColorState} from '../models';
 
 // #region Functions
 
-export function formatHslColor(color: Color, alpha: boolean): string {
-	const {hue, lightness, saturation} = color.hsl;
+export function formatHslColor(state: ColorState, alpha: boolean): string {
+	const {hue, lightness, saturation} = state.hsl;
 
-	const suffix = alpha ? ` / ${color.alpha}%` : '';
+	const suffix = alpha ? ` / ${state.alpha.value}%` : '';
 
 	return `hsl(${hue}deg ${saturation}% ${lightness}%${suffix})`;
 }
 
-export function formatHwbColor(color: Color, alpha: boolean): string {
-	const {blackness, hue, whiteness} = color.hwb;
+export function formatHwbColor(state: ColorState, alpha: boolean): string {
+	const {blackness, hue, whiteness} = state.hwb;
 
-	const suffix = alpha ? ` / ${color.alpha}%` : '';
+	const suffix = alpha ? ` / ${state.alpha.value}%` : '';
 
 	return `hwb(${hue}deg ${whiteness}% ${blackness}%${suffix})`;
 }
 
-export function formatRgbColor(color: Color, alpha: boolean): string {
-	const {blue, green, red} = color.rgb;
+export function formatRgbColor(state: ColorState, alpha: boolean): string {
+	const {blue, green, red} = state.rgb;
 
-	const suffix = alpha ? ` / ${color.alpha}%` : '';
+	const suffix = alpha ? ` / ${state.alpha.value}%` : '';
 
 	return `rgb(${red} ${green} ${blue}${suffix})`;
 }

package/src/color/misc/is.ts

@@ -4,6 +4,7 @@ import {
 	ALPHA_NONE_VALUE,
 	EXPRESSION_HEX_LONG,
 	EXPRESSION_HEX_SHORT,
+	EXPRESSION_PREFIX,
 	KEYS_HSL,
 	KEYS_HSLA,
 	KEYS_HWB,
@@ -109,7 +110,9 @@ export function isHexColor(value: unknown, alpha?: boolean): value is string {
 	}
 
 	if (alpha === false) {
-		return value.length === LENGTH_SHORT || value.length === LENGTH_LONG;
+		const unprefixed = value.replace(EXPRESSION_PREFIX, '');
+
+		return unprefixed.length === LENGTH_SHORT || unprefixed.length === LENGTH_LONG;
 	}
 
 	return true;

package/src/color/models.ts

@@ -5,6 +5,186 @@ export type Alpha = {
 	value: number;
 };
 
+/**
+ * A color that is represented in multiple color formats
+ */
+export type Color = {
+	/**
+	 * Get the alpha channel _(opacity)_ of the color as a percentage between `0` and `100`
+	 *
+	 * @returns Current alpha channel value
+	 */
+	get alpha(): number;
+
+	/**
+	 * Set the alpha channel _(opacity)_ of the color as a percentage between `0` and `100`
+	 *
+	 * @param value New alpha channel value
+	 */
+	set alpha(value: number);
+
+	/**
+	 * Get the color as a hex color string
+	 *
+	 * _Hex color string is returned with no `#`-prefix or alpha channel (opacity)_
+	 *
+	 * @returns Current color as a hex color string
+	 */
+	get hex(): string;
+
+	/**
+	 * Set the color from a hex color string
+	 *
+	 * - `#`-prefix is optional
+	 * - Alpha channel _(opacity)_ will be ignored
+	 *
+	 * @param value New hex color string
+	 */
+	set hex(value: string);
+
+	/**
+	 * Get the color as a hex color with an alpha channel _(opacity)_
+	 *
+	 * _Hex color string is returned with alpha channel (opacity), but without `#`-prefix_
+	 *
+	 * @returns Current color as a hex color string
+	 */
+	get hexa(): string;
+
+	/**
+	 * Set the color from a hex color string with an alpha channel _(opacity)_
+	 *
+	 * - `#`-prefix is optional
+	 * - Alpha channel _(opacity)_ will be respected
+	 *
+	 * @param value New hex color string
+	 */
+	set hexa(value: string);
+
+	/**
+	 * Get the color as an _HSL_ color
+	 *
+	 * @returns Current color as an _HSL_ color
+	 */
+	get hsl(): HSLColor;
+
+	/**
+	 * Set colors from an _HSL_ color
+	 *
+	 * @param value New _HSL_ color
+	 */
+	set hsl(value: HSLColor);
+
+	/**
+	 * Get the color as an _HSLA_ color
+	 *
+	 * @returns Current color as an _HSLA_ color
+	 */
+	get hsla(): HSLAColor;
+
+	/**
+	 * Set colors and alpha from an _HSLA_ color
+	 *
+	 * @param value New _HSLA_ color
+	 */
+	set hsla(value: HSLAColor);
+
+	/**
+	 * Get the color as an _HWB_ color
+	 *
+	 * @returns Current color as an _HWB_ color
+	 */
+	get hwb(): HWBColor;
+
+	/**
+	 * Set colors from an _HWB_ color
+	 *
+	 * @param value New _HWB_ color
+	 */
+	set hwb(value: HWBColor);
+
+	/**
+	 * Get the color as an _HWBA_ color
+	 *
+	 * @returns Current color as an _HWBA_ color
+	 */
+	get hwba(): HWBAColor;
+
+	/**
+	 * Set colors and alpha from an _HWBA_ color
+	 *
+	 * @param value New _HWBA_ color
+	 */
+	set hwba(value: HWBAColor);
+
+	/**
+	 * Get the color as an _RGB_ color
+	 *
+	 * @returns Current color as an _RGB_ color
+	 */
+	get rgb(): RGBColor;
+
+	/**
+	 * Set colors from an _RGB_ color
+	 *
+	 * @param value New _RGB_ color
+	 */
+	set rgb(value: RGBColor);
+
+	/**
+	 * Get the color as an _RGBA_ color
+	 *
+	 * @returns Current color as an _RGBA_ color
+	 */
+	get rgba(): RGBAColor;
+
+	/**
+	 * Set colors and alpha from an _RGBA_ color
+	 *
+	 * @param value New _RGBA_ color
+	 */
+	set rgba(value: RGBAColor);
+
+	/**
+	 * Get the color as a hex string
+	 *
+	 * @param alpha Include alpha channel _(opacity)_? _(defaults to `false`)_
+	 * @returns Hex color string
+	 */
+	toHexString(alpha?: boolean): string;
+
+	/**
+	 * Get the color as an _HSL(A)_ string
+	 *
+	 * @param alpha Include alpha channel _(opacity)_? _(defaults to `false`)_
+	 * @returns _HSL(A)_ color string
+	 */
+	toHslString(alpha?: boolean): string;
+
+	/**
+	 * Get the color as an _HWB(A)_ string
+	 *
+	 * @param alpha Include alpha channel _(opacity)_? _(defaults to `false`)_
+	 * @returns _HWB(A)_ color string
+	 */
+	toHwbString(alpha?: boolean): string;
+
+	/**
+	 * Get the color as an _RGB(A)_ string
+	 *
+	 * @param alpha Include alpha channel _(opacity)_? _(defaults to `false`)_
+	 * @returns _RGB(A)_ color string
+	 */
+	toRgbString(alpha?: boolean): string;
+
+	/**
+	 * Get the color as a hex color string
+	 *
+	 * @returns Hex color string
+	 */
+	toString(): string;
+};
+
 type ColorWithAlpha = {
 	/**
 	 * Alpha channel _(opacity)_ of the color _(in percentage; 0-100)_
@@ -77,8 +257,6 @@ export type RGBColor = {
 
 export type ColorProperty = 'alpha' | keyof HSLColor | keyof HWBColor | keyof RGBColor;
 
-export type ColorSpace = 'hsl' | 'rgb';
-
 export type ColorState = {
 	alpha: Alpha;
 	hex: string;