@oscarpalmer/atoms 0.190.0 → 0.191.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,105 @@
-import {formatHslColor, formatHwbColor, formatRgbColor} from './misc';
+import {PROPERTY_COLOR, TYPE_HEX, TYPE_HSL, TYPE_HWB, TYPE_RGB} 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 = (state: ColorState, value: any, alpha: boolean) => void;
+
+type SetValues = Record<ColorType, SetValue>;
+
+// #endregion
+
+// #region Functions
+
 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),
+		toHslString: (alpha?: boolean) => formatHslColor(state, alpha),
+		toHwbString: (alpha?: boolean) => formatHwbColor(state, alpha),
+		toRgbString: (alpha?: boolean) => formatRgbColor(state, alpha),
 		toString: () => (instance as Color).toHexString(),
 	};
 
 	Object.defineProperties(instance, {
-		$color: {
+		[PROPERTY_COLOR]: {
 			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('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),
+		hex: getProperty(TYPE_HEX, state, false),
+		hexa: getProperty(TYPE_HEX, state, true),
+		hsl: getProperty(TYPE_HSL, state, false),
+		hsla: getProperty(TYPE_HSL, state, true),
+		hwb: getProperty(TYPE_HWB, state, false),
+		hwba: getProperty(TYPE_HWB, state, true),
+		origin: {
+			enumerable: true,
+			get: () => state.origin,
+		},
+		rgb: getProperty(TYPE_RGB, state, false),
+		rgba: getProperty(TYPE_RGB, state, 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,
 	state: ColorState,
 	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(state, value, 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;
+	}
 
-			if (typeof value === 'string') {
-				return getHex(state, alpha);
+	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);
+	}
 }
 
 // #endregion
 
 // #region Variables
 
-const setters: Record<
-	'hex' | 'hsl' | 'hwb' | 'rgb',
-	(state: ColorState, value: any, alpha: boolean) => void
-> = {
+const setters: SetValues = {
 	hex: setHexColor,
 	hsl: setHSLColor,
 	hwb: setHWBColor,

package/src/color/misc/alpha.ts

@@ -1,9 +1,11 @@
+import {clamp} from '../..';
 import {round} from '../../internal/math/misc';
 import {
 	ALPHA_FULL_HEX_LONG,
 	ALPHA_NONE_HEX,
 	ALPHA_NONE_VALUE,
 	DEFAULT_ALPHA,
+	EXPRESSION_ALPHA_HEX,
 	MAX_HEX,
 	MAX_PERCENT,
 } from '../constants';
@@ -11,19 +13,23 @@ 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() === ALPHA_FULL_HEX_LONG) {
+		return {...DEFAULT_ALPHA};
+	}
+
+	if (hex && EXPRESSION_ALPHA_HEX.test(value)) {
 		return {
 			hex: value,
 			value: Number.parseInt(value, 16) / MAX_HEX,
 		};
 	}
 
-	return {...DEFAULT_ALPHA};
+	return getAlphaFromValue(Number.parseFloat(value));
 }
 
 export function getAlphaHexadecimal(value: number): string {
@@ -35,7 +41,7 @@ export function getAlphaHexadecimal(value: number): string {
 		return ALPHA_FULL_HEX_LONG;
 	}
 
-	return round(value * MAX_HEX).toString(16);
+	return round((value / MAX_PERCENT) * MAX_HEX).toString(16);
 }
 
 function getAlphaFromValue(value: number): Alpha {
@@ -48,11 +54,11 @@ function getAlphaFromValue(value: number): Alpha {
 }
 
 export function getAlphaValue(original: number): number {
-	if (Number.isNaN(original) || original >= MAX_PERCENT) {
+	if (Number.isNaN(original)) {
 		return MAX_PERCENT;
 	}
 
-	return original <= ALPHA_NONE_VALUE ? ALPHA_NONE_VALUE : original;
+	return clamp(original, ALPHA_NONE_VALUE, MAX_PERCENT);
 }
 
 // #endregion

package/src/color/misc/format.ts

@@ -0,0 +1,29 @@
+import {TYPE_HSL, TYPE_HWB, TYPE_RGB} 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, 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, 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, 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

@@ -15,10 +15,14 @@ import {
 	SRGB_LUMINANCE_OFFSET,
 	SRGB_LUMINANCE_RED,
 	SRGB_LUMINANCE_THRESHOLD,
+	TYPE_HEX,
+	TYPE_HSL,
+	TYPE_HWB,
+	TYPE_RGB,
 } 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,8 +60,8 @@ 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), TYPE_RGB);
+	const {blue, green, red} = rgb;
 
 	const values = [blue / MAX_HEX, green / MAX_HEX, red / MAX_HEX];
 	const {length} = values;
@@ -109,7 +113,7 @@ export function getHexaColor(value: unknown): string {
  * @returns Hex color string
  */
 export function getHexColor(value: unknown): string {
-	return getColorState(value).hex;
+	return getColorFromState(getColorState(value), TYPE_HEX);
 }
 
 export function getHexValue(value: unknown): number {
@@ -130,11 +134,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, TYPE_HSL);
 
 	return {
 		...hsl,
-		alpha: alpha.value,
+		alpha: state.alpha.value,
 	};
 }
 
@@ -148,7 +153,7 @@ export function getHslaColor(value: unknown): HSLAColor {
  * @returns _HWB_ color
  */
 export function getHwbColor(value: unknown): HWBColor {
-	return getColorState(value).hwb;
+	return getColorFromState(getColorState(value), TYPE_HWB);
 }
 
 /**
@@ -161,11 +166,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, TYPE_HWB);
 
 	return {
 		...hwb,
-		alpha: alpha.value,
+		alpha: state.alpha.value,
 	};
 }
 
@@ -179,7 +185,7 @@ export function getHwbaColor(value: unknown): HWBAColor {
  * @returns _HSL_ color
  */
 export function getHslColor(value: unknown): HSLColor {
-	return getColorState(value).hsl;
+	return getColorFromState(getColorState(value), TYPE_HSL);
 }
 
 export function getPercentage(value: unknown): number {
@@ -196,11 +202,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, TYPE_RGB);
 
 	return {
 		...rgb,
-		alpha: alpha.value,
+		alpha: state.alpha.value,
 	};
 }
 
@@ -214,7 +221,7 @@ export function getRgbaColor(value: unknown): RGBAColor {
  * @returns _RGB_ color
  */
 export function getRgbColor(value: unknown): RGBColor {
-	return getColorState(value).rgb;
+	return getColorFromState(getColorState(value), TYPE_RGB);
 }
 
 // #endregion

package/src/color/misc/is.ts

@@ -16,6 +16,7 @@ import {
 	MAX_DEGREE,
 	MAX_HEX,
 	MAX_PERCENT,
+	PROPERTY_COLOR,
 } from '../constants';
 import type {Color} from '../index';
 import type {
@@ -49,7 +50,12 @@ function isBytey(value: unknown): value is number {
  * @returns `true` if the value is a _Color_, otherwise `false`
  */
 export function isColor(value: unknown): value is Color {
-	return typeof value === 'object' && value !== null && '$color' in value && value.$color === true;
+	return (
+		typeof value === 'object' &&
+		value !== null &&
+		PROPERTY_COLOR in value &&
+		value[PROPERTY_COLOR] === true
+	);
 }
 
 function isColorValue(obj: unknown, properties: ColorProperty[]): boolean {
@@ -128,12 +134,6 @@ export function isHslaColor(value: unknown): value is HSLAColor {
 	return isColorValue(value, KEYS_HSLA);
 }
 
-/**
- * Is the value like an _HSLA_ color?
- *
- * @param value Value to check
- * @returns `true` if the value is like an _HSLA_ color, otherwise `false`
- */
 export function isHslaLike(value: unknown): value is Record<keyof HSLAColor, unknown> {
 	return hasKeys(value, KEYS_HSLA);
 }
@@ -148,12 +148,6 @@ export function isHslColor(value: unknown): value is HSLColor {
 	return isColorValue(value, KEYS_HSLA) || isColorValue(value, KEYS_HSL);
 }
 
-/**
- * Is the value like an _HSL_ color?
- *
- * @param value Value to check
- * @returns `true` if the value is like an _HSL_ color, otherwise `false`
- */
 export function isHslLike(value: unknown): value is Record<keyof HSLColor, unknown> {
 	return hasKeys(value, KEYS_HSL);
 }
@@ -168,12 +162,6 @@ export function isHwbaColor(value: unknown): value is HWBAColor {
 	return isColorValue(value, KEYS_HWBA);
 }
 
-/**
- * Is the value like an _HWBA_ color?
- *
- * @param value Value to check
- * @returns `true` if the value is like an _HWBA_ color, otherwise `false`
- */
 export function isHwbaLike(value: unknown): value is Record<keyof HWBAColor, unknown> {
 	return hasKeys(value, KEYS_HWBA);
 }
@@ -188,12 +176,6 @@ export function isHwbColor(value: unknown): value is HWBColor {
 	return isColorValue(value, KEYS_HWB) || isColorValue(value, KEYS_HWBA);
 }
 
-/**
- * Is the value like an _HWB_ color?
- *
- * @param value Value to check
- * @returns `true` if the value is like an _HWB_ color, otherwise `false`
- */
 export function isHwbLike(value: unknown): value is Record<keyof HWBColor, unknown> {
 	return hasKeys(value, KEYS_HWB);
 }
@@ -208,12 +190,6 @@ export function isRgbaColor(value: unknown): value is RGBAColor {
 	return isColorValue(value, KEYS_RGBA);
 }
 
-/**
- * Is the value like an _RGBA_ color?
- *
- * @param value Value to check
- * @returns `true` if the value is like an _RGBA_ color, otherwise `false`
- */
 export function isRgbaLike(value: unknown): value is Record<keyof RGBAColor, unknown> {
 	return hasKeys(value, KEYS_RGBA);
 }
@@ -228,12 +204,6 @@ export function isRgbColor(value: unknown): value is RGBColor {
 	return isColorValue(value, KEYS_RGBA) || isColorValue(value, KEYS_RGB);
 }
 
-/**
- * Is the value like an _RGB_ color?
- *
- * @param value Value to check
- * @returns `true` if the value is like an _RGB_ color, otherwise `false`
- */
 export function isRgbLike(value: unknown): value is Record<keyof RGBColor, unknown> {
 	return hasKeys(value, KEYS_RGB);
 }