@oscarpalmer/atoms 0.190.0 → 0.192.0

package/src/color/index.ts

@@ -1,6 +1,18 @@
 import {color} from './instance';
 import {isColor} from './misc/is';
-import type {Color, HSLAColor, HSLColor, HWBAColor, HWBColor, RGBAColor, RGBColor} from './models';
+import type {
+	Color,
+	ColorType,
+	ColorTypeExtended,
+	ColorValue,
+	ColorValueExtended,
+	HSLAColor,
+	HSLColor,
+	HWBAColor,
+	HWBColor,
+	RGBAColor,
+	RGBColor,
+} from './models';
 
 // #region Functions
 
@@ -32,22 +44,16 @@ export {
 	getRgbaColor,
 	getRgbColor,
 } from './misc/get';
-
 export {
 	isColor,
 	isHexColor,
 	isHslaColor,
 	isHslColor,
-	isHslLike,
 	isHwbaColor,
-	isHwbaLike,
 	isHwbColor,
-	isHwbLike,
 	isRgbaColor,
 	isRgbColor,
-	isRgbLike,
 } from './misc/is';
-
 export {
 	getNormalizedHex,
 	hexToHsl,
@@ -60,6 +66,18 @@ export {
 export {hslToHex, hslToHwb, hslToHwba, hslToRgb, hslToRgba} from './space/hsl';
 export {hwbToHex, hwbToHsl, hwbToHsla, hwbToRgb, hwbToRgba} from './space/hwb';
 export {rgbToHex, rgbToHsl, rgbToHsla, rgbToHwb, rgbToHwba} from './space/rgb';
-export type {Color, HSLAColor, HSLColor, HWBAColor, HWBColor, RGBAColor, RGBColor};
+export type {
+	Color,
+	ColorType,
+	ColorTypeExtended,
+	ColorValue,
+	ColorValueExtended,
+	HSLAColor,
+	HSLColor,
+	HWBAColor,
+	HWBColor,
+	RGBAColor,
+	RGBColor,
+};
 
 // #endregion

package/src/color/instance.ts

@@ -1,90 +1,158 @@
-import {formatHslColor, formatHwbColor, formatRgbColor} from './misc';
+import {
+	clearSubscriptions,
+	getSubscription,
+	getSubscriptions,
+	type Subscription,
+	type SubscriptionProperty,
+	type Subscriptions,
+} from '../internal/subscription';
+import {COLOR_PROPERTY, COLOR_TYPE} from './constants';
 import {getAlpha} from './misc/alpha';
-import {getColorState, setHexColor, setHSLColor, setHWBColor, setRGBColor} from './misc/state';
-import type {Color, ColorState} from './models';
+import {formatHslColor, formatHwbColor, formatRgbColor} from './misc/format';
+import {
+	getColorFromState,
+	getColorState,
+	setHexColor,
+	setHSLColor,
+	setHWBColor,
+	setRGBColor,
+} from './misc/state';
+import type {Color, ColorState, ColorType} from './models';
 
 // #region Types
 
+type SetValue = (
+	color: Color,
+	state: ColorState,
+	subscriptions: Subscriptions<Function>,
+	value: any,
+	alpha: boolean,
+) => void;
+
+type SetValues = Record<ColorType, SetValue>;
+
+// #endregion
+
+// #region Functions
+
 export function color(value: unknown): Color {
 	const state = getColorState(value);
 
+	const subscriptions = getSubscriptions<Function>(COLOR_TYPE.all);
+
 	const instance = {
+		subscribe: (first?: unknown, second?: unknown) =>
+			subscribeToColor(subscriptions, first, second),
 		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),
+		toHslString: (alpha?: boolean) => formatHslColor(state, alpha),
+		toHwbString: (alpha?: boolean) => formatHwbColor(state, alpha),
+		toRgbString: (alpha?: boolean) => formatRgbColor(state, alpha),
 		toString: () => (instance as Color).toHexString(),
+		unsubscribe: () => clearSubscriptions(subscriptions),
 	};
 
 	Object.defineProperties(instance, {
-		$color: {
+		[COLOR_PROPERTY.name]: {
 			enumerable: false,
-			get: () => true,
+			value: true,
 		},
 		alpha: {
 			enumerable: true,
 			get: () => state.alpha.value,
-			set: (value: number) => {
-				if (typeof value === 'number' && !Number.isNaN(value)) {
-					state.alpha = getAlpha(value);
-				}
-			},
+			set: (value: unknown) => setAlphaValue(state, value),
+		},
+		hex: getProperty(COLOR_TYPE.hex, instance as Color, state, subscriptions, false),
+		hexa: getProperty(COLOR_TYPE.hex, instance as Color, state, subscriptions, true),
+		hsl: getProperty(COLOR_TYPE.hsl, instance as Color, state, subscriptions, false),
+		hsla: getProperty(COLOR_TYPE.hsl, instance as Color, state, subscriptions, true),
+		hwb: getProperty(COLOR_TYPE.hwb, instance as Color, state, subscriptions, false),
+		hwba: getProperty(COLOR_TYPE.hwb, instance as Color, state, subscriptions, true),
+		origin: {
+			enumerable: true,
+			get: () => state.origin,
 		},
-		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),
+		rgb: getProperty(COLOR_TYPE.rgb, instance as Color, state, subscriptions, false),
+		rgba: getProperty(COLOR_TYPE.rgb, instance as Color, state, subscriptions, true),
 	});
 
 	return Object.freeze(instance) as Color;
 }
 
-function getHex(state: ColorState, alpha: boolean): string {
-	return alpha ? `${state.hex}${state.alpha.hex}` : state.hex;
-}
-
 function getProperty(
 	space: keyof typeof setters,
+	color: Color,
 	state: ColorState,
+	subscriptions: Subscriptions<Function>,
 	alpha: boolean,
 ): PropertyDescriptor {
-	const setter = setters[space];
+	const setValue = setters[space];
 
 	return {
 		enumerable: true,
-		get: () => {
-			const value = state[space];
+		get: () => getValue(space, state, alpha),
+		set: (value: unknown) => setValue(color, state, subscriptions, value, alpha),
+	};
+}
 
-			if (typeof value === 'string') {
-				return getHex(state, alpha);
+function getValue(space: keyof typeof setters, state: ColorState, alpha: boolean) {
+	const value = getColorFromState(state, space);
+
+	if (typeof value === 'string') {
+		return alpha ? `${value}${state.alpha.hex}` : value;
+	}
+
+	return alpha
+		? {
+				...value,
+				alpha: state.alpha.value,
 			}
+		: {...value};
+}
 
-			return alpha
-				? {
-						...value,
-						alpha: state.alpha.value,
-					}
-				: {...value};
-		},
-		set: (value: unknown) => {
-			setter(state, value, alpha);
-		},
-	};
+function setAlphaValue(state: ColorState, value: unknown): void {
+	if (typeof value === 'number' && !Number.isNaN(value)) {
+		state.alpha = getAlpha(value, false);
+	}
+}
+
+function subscribeToColor(
+	subscriptions: Subscriptions,
+	first: unknown,
+	second?: unknown,
+): Subscription {
+	let key: string | undefined;
+	let value: Function | undefined;
+
+	if (typeof first === 'string') {
+		key = first;
+		value = second as Function;
+	} else if (typeof first === 'function') {
+		value = first;
+	}
+
+	if (typeof value !== 'function') {
+		throw new Error();
+	}
+
+	return getSubscription({
+		key,
+		subscriptions,
+		value,
+		property: colorSubscription,
+	});
 }
 
 // #endregion
 
 // #region Variables
 
-const setters: Record<
-	'hex' | 'hsl' | 'hwb' | 'rgb',
-	(state: ColorState, value: any, alpha: boolean) => void
-> = {
+const colorSubscription: SubscriptionProperty = {
+	key: COLOR_PROPERTY.name,
+	value: COLOR_PROPERTY.subscription,
+};
+
+const setters: SetValues = {
 	hex: setHexColor,
 	hsl: setHSLColor,
 	hwb: setHWBColor,

package/src/color/misc/alpha.ts

@@ -1,41 +1,39 @@
 import {round} from '../../internal/math/misc';
-import {
-	ALPHA_FULL_HEX_LONG,
-	ALPHA_NONE_HEX,
-	ALPHA_NONE_VALUE,
-	DEFAULT_ALPHA,
-	MAX_HEX,
-	MAX_PERCENT,
-} from '../constants';
+import {clamp} from '../../internal/number';
+import {COLOR_ALPHA, COLOR_DEFAULTS, COLOR_EXPRESSION, COLOR_MAX} from '../constants';
 import type {Alpha} from '../models';
 
 // #region Functions
 
-export function getAlpha(value: unknown): Alpha {
+export function getAlpha(value: unknown, hex: boolean): Alpha {
 	if (typeof value === 'number') {
 		return getAlphaFromValue(value);
 	}
 
-	if (typeof value === 'string' && value !== ALPHA_FULL_HEX_LONG) {
+	if (typeof value !== 'string' || value.toLowerCase() === COLOR_ALPHA.fullHexLong) {
+		return {...COLOR_DEFAULTS.alpha};
+	}
+
+	if (hex && COLOR_EXPRESSION.alphaHex.test(value)) {
 		return {
 			hex: value,
-			value: Number.parseInt(value, 16) / MAX_HEX,
+			value: Number.parseInt(value, 16) / COLOR_MAX.hex,
 		};
 	}
 
-	return {...DEFAULT_ALPHA};
+	return getAlphaFromValue(Number.parseFloat(value));
 }
 
 export function getAlphaHexadecimal(value: number): string {
-	if (value === ALPHA_NONE_VALUE) {
-		return ALPHA_NONE_HEX;
+	if (value === COLOR_ALPHA.noneValue) {
+		return COLOR_ALPHA.noneHex;
 	}
 
-	if (value === MAX_PERCENT) {
-		return ALPHA_FULL_HEX_LONG;
+	if (value === COLOR_MAX.percent) {
+		return COLOR_ALPHA.fullHexLong;
 	}
 
-	return round(value * MAX_HEX).toString(16);
+	return round((value / COLOR_MAX.percent) * COLOR_MAX.hex).toString(16);
 }
 
 function getAlphaFromValue(value: number): Alpha {
@@ -48,11 +46,11 @@ function getAlphaFromValue(value: number): Alpha {
 }
 
 export function getAlphaValue(original: number): number {
-	if (Number.isNaN(original) || original >= MAX_PERCENT) {
-		return MAX_PERCENT;
+	if (Number.isNaN(original)) {
+		return COLOR_MAX.percent;
 	}
 
-	return original <= ALPHA_NONE_VALUE ? ALPHA_NONE_VALUE : original;
+	return clamp(original, COLOR_ALPHA.noneValue, COLOR_MAX.percent);
 }
 
 // #endregion

package/src/color/misc/format.ts

@@ -0,0 +1,29 @@
+import {COLOR_TYPE} from '../constants';
+import type {ColorState} from '../models';
+import {getColorFromState} from './state';
+
+// #region Functions
+
+export function formatHslColor(state: ColorState, alpha?: boolean): string {
+	const {hue, lightness, saturation} = getColorFromState(state, COLOR_TYPE.hsl);
+
+	return `hsl(${hue}deg ${saturation}% ${lightness}%${getSuffix(state, alpha)})`;
+}
+
+export function formatHwbColor(state: ColorState, alpha?: boolean): string {
+	const {blackness, hue, whiteness} = getColorFromState(state, COLOR_TYPE.hwb);
+
+	return `hwb(${hue}deg ${whiteness}% ${blackness}%${getSuffix(state, alpha)})`;
+}
+
+export function formatRgbColor(state: ColorState, alpha?: boolean): string {
+	const {blue, green, red} = getColorFromState(state, COLOR_TYPE.rgb);
+
+	return `rgb(${red} ${green} ${blue}${getSuffix(state, alpha)})`;
+}
+
+function getSuffix(state: ColorState, alpha?: boolean): string {
+	return alpha === true ? ` / ${state.alpha.value}%` : '';
+}
+
+// #endregion

package/src/color/misc/get.ts

@@ -1,24 +1,9 @@
 import {round} from '../../internal/math/misc';
-import {clamp} from '../../number';
-import {
-	HEX_BLACK,
-	HEX_WHITE,
-	MAX_DEGREE,
-	MAX_HEX,
-	MAX_PERCENT,
-	SRGB_LUMINANCE_BLUE,
-	SRGB_LUMINANCE_EXPONENT,
-	SRGB_LUMINANCE_GREEN,
-	SRGB_LUMINANCE_MINIMUM,
-	SRGB_LUMINANCE_MODIFIER,
-	SRGB_LUMINANCE_MULTIPLIER,
-	SRGB_LUMINANCE_OFFSET,
-	SRGB_LUMINANCE_RED,
-	SRGB_LUMINANCE_THRESHOLD,
-} from '../constants';
+import {clamp} from '../../internal/number';
+import {COLOR_DEFAULTS, COLOR_MAX, COLOR_SRGB, COLOR_TYPE} from '../constants';
 import {color} from '../instance';
 import type {Color, HSLAColor, HSLColor, HWBAColor, HWBColor, RGBAColor, RGBColor} from '../models';
-import {getColorState} from './state';
+import {getColorFromState, getColorState} from './state';
 
 // #region Functions
 
@@ -56,30 +41,32 @@ export function getForegroundColor(value: unknown, hex: true): string;
 export function getForegroundColor(value: unknown): Color;
 
 export function getForegroundColor(value: unknown, hex?: unknown): string | Color {
-	const state = getColorState(value);
-	const {blue, green, red} = state.rgb;
+	const rgb = getColorFromState(getColorState(value), COLOR_TYPE.rgb);
+	const {blue, green, red} = rgb;
 
-	const values = [blue / MAX_HEX, green / MAX_HEX, red / MAX_HEX];
+	const values = [blue / COLOR_MAX.hex, green / COLOR_MAX.hex, red / COLOR_MAX.hex];
 	const {length} = values;
 
 	for (let index = 0; index < length; index += 1) {
 		const color = values[index];
 
-		if (color <= SRGB_LUMINANCE_MINIMUM) {
-			values[index] /= SRGB_LUMINANCE_MULTIPLIER;
+		if (color <= COLOR_SRGB.luminanceMinimum) {
+			values[index] /= COLOR_SRGB.luminanceMultiplier;
 		} else {
 			values[index] =
-				((color + SRGB_LUMINANCE_OFFSET) / SRGB_LUMINANCE_MODIFIER) ** SRGB_LUMINANCE_EXPONENT;
+				((color + COLOR_SRGB.luminanceOffset) / COLOR_SRGB.luminanceModifier) **
+				COLOR_SRGB.luminanceExponent;
 		}
 	}
 
 	const luminance =
-		SRGB_LUMINANCE_RED * values[2] +
-		SRGB_LUMINANCE_GREEN * values[1] +
-		SRGB_LUMINANCE_BLUE * values[0];
+		COLOR_SRGB.luminanceRed * values[2] +
+		COLOR_SRGB.luminanceGreen * values[1] +
+		COLOR_SRGB.luminanceBlue * values[0];
 
 	// Rudimentary and ureliable?; implement APCA for more reliable results?
-	const foreground = luminance > SRGB_LUMINANCE_THRESHOLD ? HEX_BLACK : HEX_WHITE;
+	const foreground =
+		luminance > COLOR_SRGB.luminanceThreshold ? COLOR_DEFAULTS.hexBlack : COLOR_DEFAULTS.hexWhite;
 
 	return hex === true ? foreground : color(foreground);
 }
@@ -109,15 +96,15 @@ export function getHexaColor(value: unknown): string {
  * @returns Hex color string
  */
 export function getHexColor(value: unknown): string {
-	return getColorState(value).hex;
+	return getColorFromState(getColorState(value), COLOR_TYPE.hex);
 }
 
 export function getHexValue(value: unknown): number {
-	return getClampedValue(value, 0, MAX_HEX, true);
+	return getClampedValue(value, 0, COLOR_MAX.hex, true);
 }
 
 export function getDegrees(value: unknown): number {
-	return getClampedValue(value, 0, MAX_DEGREE);
+	return getClampedValue(value, 0, COLOR_MAX.degree);
 }
 
 /**
@@ -130,11 +117,12 @@ export function getDegrees(value: unknown): number {
  * @returns _HSLA_ color
  */
 export function getHslaColor(value: unknown): HSLAColor {
-	const {alpha, hsl} = getColorState(value);
+	const state = getColorState(value);
+	const hsl = getColorFromState(state, COLOR_TYPE.hsl);
 
 	return {
 		...hsl,
-		alpha: alpha.value,
+		alpha: state.alpha.value,
 	};
 }
 
@@ -148,7 +136,7 @@ export function getHslaColor(value: unknown): HSLAColor {
  * @returns _HWB_ color
  */
 export function getHwbColor(value: unknown): HWBColor {
-	return getColorState(value).hwb;
+	return getColorFromState(getColorState(value), COLOR_TYPE.hwb);
 }
 
 /**
@@ -161,11 +149,12 @@ export function getHwbColor(value: unknown): HWBColor {
  * @returns _HWBA_ color
  */
 export function getHwbaColor(value: unknown): HWBAColor {
-	const {alpha, hwb} = getColorState(value);
+	const state = getColorState(value);
+	const hwb = getColorFromState(state, COLOR_TYPE.hwb);
 
 	return {
 		...hwb,
-		alpha: alpha.value,
+		alpha: state.alpha.value,
 	};
 }
 
@@ -179,11 +168,11 @@ export function getHwbaColor(value: unknown): HWBAColor {
  * @returns _HSL_ color
  */
 export function getHslColor(value: unknown): HSLColor {
-	return getColorState(value).hsl;
+	return getColorFromState(getColorState(value), COLOR_TYPE.hsl);
 }
 
 export function getPercentage(value: unknown): number {
-	return getClampedValue(value, 0, MAX_PERCENT);
+	return getClampedValue(value, 0, COLOR_MAX.percent);
 }
 
 /**
@@ -196,11 +185,12 @@ export function getPercentage(value: unknown): number {
  * @returns _RGBA_ color
  */
 export function getRgbaColor(value: unknown): RGBAColor {
-	const {alpha, rgb} = getColorState(value);
+	const state = getColorState(value);
+	const rgb = getColorFromState(state, COLOR_TYPE.rgb);
 
 	return {
 		...rgb,
-		alpha: alpha.value,
+		alpha: state.alpha.value,
 	};
 }
 
@@ -214,7 +204,7 @@ export function getRgbaColor(value: unknown): RGBAColor {
  * @returns _RGB_ color
  */
 export function getRgbColor(value: unknown): RGBColor {
-	return getColorState(value).rgb;
+	return getColorFromState(getColorState(value), COLOR_TYPE.rgb);
 }
 
 // #endregion