@oscarpalmer/atoms 0.190.0 → 0.191.0

package/src/color/misc/state.ts

@@ -8,9 +8,14 @@ import {
 	KEYS_RGB,
 	LENGTH_LONG,
 	MAX_PERCENT,
+	TYPE_HEX,
+	TYPE_HSL,
+	TYPE_HWB,
+	TYPE_RGB,
 } from '../constants';
 import type {
 	ColorState,
+	ColorType,
 	HSLAColor,
 	HSLColor,
 	HWBAColor,
@@ -18,114 +23,108 @@ import type {
 	RGBAColor,
 	RGBColor,
 } from '../models';
-import {getNormalizedHex, hexToHsl, hexToRgb} from '../space/hex';
-import {getHslValue, hslToHex, hslToHwb, hslToRgb} from '../space/hsl';
-import {getHwbValue, hwbToHex, hwbToHsl, hwbToRgb} from '../space/hwb';
-import {getRgbValue, rgbToHex, rgbToHsl, rgbToHwb} from '../space/rgb';
+import {getColorFromHex, getNormalizedHex} from '../space/hex';
+import {getColorFromHsl, getHslValue} from '../space/hsl';
+import {getColorFromHwb, getHwbValue} from '../space/hwb';
+import {getColorFromRgb, getRgbValue} from '../space/rgb';
 import {getAlpha} from './alpha';
 import {getDegrees, getHexValue, getPercentage} from './get';
 import {isColor, isHexColor, isHslLike, isHwbLike, isRgbLike} from './is';
 
 // #region Functions
 
+export function getColorFromState<Type extends ColorType>(
+	state: ColorState,
+	type: Type,
+): NonNullable<ColorState[Type]> {
+	const {origin} = state;
+
+	if (type === origin) {
+		return state[origin] as NonNullable<ColorState[Type]>;
+	}
+
+	return state[type] ?? (getters[origin](state, type) as NonNullable<ColorState[Type]>);
+}
+
 export function getColorState(value: unknown): ColorState {
 	if (typeof value === 'string') {
 		return getColorStateForHex(value);
 	}
 
 	if (isColor(value)) {
+		const {origin} = value;
+
 		return {
-			hex: value.hex,
-			hsl: value.hsl,
-			hwb: value.hwb,
-			rgb: value.rgb,
-			alpha: getAlpha(value.alpha),
+			origin,
+			[origin]: value[origin],
+			alpha: getAlpha(value.alpha, false),
 		};
 	}
 
-	const state: Partial<ColorState> = {};
-
 	if (typeof value === 'object' && value !== null) {
-		state.alpha = getAlpha((value as HSLAColor).alpha);
+		const state: ColorState = {
+			alpha: getAlpha((value as HSLAColor).alpha, false),
+			origin: undefined as never,
+		};
 
 		if (KEYS_HSL.every(key => key in value)) {
-			return getColorStateForHsl(state, value as Record<keyof HSLColor, unknown>);
-		}
-
-		if (KEYS_HWB.every(key => key in value)) {
-			return getColorStateForHwb(state, value as Record<keyof HWBColor, unknown>);
+			state.hsl = getHslValue(value as Record<keyof HSLColor, unknown>);
+			state.origin = TYPE_HSL;
+		} else if (KEYS_HWB.every(key => key in value)) {
+			state.hwb = getHwbValue(value as Record<keyof HWBColor, unknown>);
+			state.origin = TYPE_HWB;
+		} else if (KEYS_RGB.every(key => key in value)) {
+			state.rgb = getRgbValue(value as Record<keyof RGBColor, unknown>);
+			state.origin = TYPE_RGB;
 		}
 
-		if (KEYS_RGB.every(key => key in value)) {
-			return getColorStateForRgb(state, value as Record<keyof RGBColor, unknown>);
+		if (state.origin != null) {
+			return state;
 		}
 	}
 
-	return getDefaultColorState(state);
+	return getDefaultColorState();
 }
 
 function getColorStateForHex(value: string): ColorState {
 	const normalized = getNormalizedHex(value, true);
 	const hex = normalized.slice(0, LENGTH_LONG);
 
-	const hsl = hexToHsl(hex);
-
 	return {
 		hex,
-		hsl,
-		alpha: getAlpha(normalized.slice(LENGTH_LONG)),
-		hwb: hslToHwb(hsl),
-		rgb: hslToRgb(hsl),
+		alpha: getAlpha(normalized.slice(LENGTH_LONG), true),
+		origin: TYPE_HEX,
 	};
 }
 
-function getColorStateForHsl(
-	state: Partial<ColorState>,
-	value: Record<keyof HSLColor, unknown>,
-): ColorState {
-	state.hsl = getHslValue(value);
-
-	state.rgb = hslToRgb(state.hsl);
-	state.hex = hslToHex(state.hsl);
-	state.hwb = hslToHwb(state.hsl);
-
-	return state as ColorState;
-}
-
-function getColorStateForHwb(
-	state: Partial<ColorState>,
-	value: Record<keyof HWBColor, unknown>,
-): ColorState {
-	state.hwb = getHwbValue(value);
-
-	state.hsl = hwbToHsl(state.hwb);
-	state.rgb = hwbToRgb(state.hwb);
-	state.hex = hwbToHex(state.hwb);
-
-	return state as ColorState;
-}
-
-function getColorStateForRgb(
-	state: Partial<ColorState>,
-	value: Record<keyof RGBColor, unknown>,
-): ColorState {
-	state.rgb = getRgbValue(value);
-
-	state.hex = rgbToHex(state.rgb);
-	state.hsl = rgbToHsl(state.rgb);
-	state.hwb = rgbToHwb(state.rgb);
-
-	return state as ColorState;
+function getDefaultColorState(): ColorState {
+	return {
+		alpha: getAlpha(MAX_PERCENT, false),
+		hex: HEX_BLACK,
+		hsl: {...DEFAULT_HSL},
+		hwb: {...DEFAULT_HWB},
+		rgb: {...DEFAULT_RGB},
+		origin: TYPE_HEX,
+	};
 }
 
-function getDefaultColorState(state: Partial<ColorState>): ColorState {
-	state.alpha = getAlpha(MAX_PERCENT);
-	state.hex = HEX_BLACK;
-	state.hsl = {...DEFAULT_HSL};
-	state.hwb = {...DEFAULT_HWB};
-	state.rgb = {...DEFAULT_RGB};
-
-	return state as ColorState;
+function setColorValue<Type extends ColorType>(
+	state: ColorState,
+	type: Type,
+	value: ColorState[Type],
+	alpha?: number | string,
+): void {
+	state.hex = undefined;
+	state.hsl = undefined;
+	state.hwb = undefined;
+	state.rgb = undefined;
+
+	state.origin = type;
+	state[type] = value;
+
+	if (alpha != null) {
+		state.alpha = getAlpha(alpha, type === TYPE_HEX);
+	}
 }
 
 export function setHexColor(state: ColorState, value: string, alpha: boolean): void {
@@ -134,18 +133,13 @@ export function setHexColor(state: ColorState, value: string, alpha: boolean): v
 	}
 
 	const normalized = getNormalizedHex(value, true);
-	const hex = normalized.slice(0, LENGTH_LONG);
-	const hsl = hexToHsl(hex);
 
-	state.hex = hex;
-	state.hsl = hsl;
-
-	state.rgb = hslToRgb(hsl);
-	state.hwb = hslToHwb(hsl);
-
-	if (alpha) {
-		state.alpha = getAlpha(normalized.slice(LENGTH_LONG));
-	}
+	setColorValue(
+		state,
+		TYPE_HEX,
+		normalized.slice(0, LENGTH_LONG),
+		alpha ? normalized.slice(LENGTH_LONG) : undefined,
+	);
 }
 
 export function setHSLColor(state: ColorState, value: unknown, alpha: boolean): void {
@@ -153,21 +147,16 @@ export function setHSLColor(state: ColorState, value: unknown, alpha: boolean):
 		return;
 	}
 
-	const hsl = {
-		hue: getDegrees((value as HSLColor).hue),
-		saturation: getPercentage((value as HSLColor).saturation),
-		lightness: getPercentage((value as HSLColor).lightness),
-	};
-
-	state.hsl = hsl;
-
-	state.hex = hslToHex(hsl);
-	state.hwb = hslToHwb(hsl);
-	state.rgb = hslToRgb(hsl);
-
-	if (alpha) {
-		state.alpha = getAlpha((value as HSLAColor).alpha);
-	}
+	setColorValue(
+		state,
+		TYPE_HSL,
+		{
+			hue: getDegrees((value as HSLColor).hue),
+			saturation: getPercentage((value as HSLColor).saturation),
+			lightness: getPercentage((value as HSLColor).lightness),
+		},
+		alpha ? (value as HSLAColor).alpha : undefined,
+	);
 }
 
 export function setHWBColor(state: ColorState, value: unknown, alpha: boolean): void {
@@ -175,21 +164,16 @@ export function setHWBColor(state: ColorState, value: unknown, alpha: boolean):
 		return;
 	}
 
-	const hwb = {
-		hue: getDegrees((value as HWBColor).hue),
-		whiteness: getPercentage((value as HWBColor).whiteness),
-		blackness: getPercentage((value as HWBColor).blackness),
-	};
-
-	state.hwb = hwb;
-
-	state.hex = hwbToHex(hwb);
-	state.hsl = hwbToHsl(hwb);
-	state.rgb = hwbToRgb(hwb);
-
-	if (alpha) {
-		state.alpha = getAlpha((value as HWBAColor).alpha);
-	}
+	setColorValue(
+		state,
+		TYPE_HWB,
+		{
+			hue: getDegrees((value as HWBColor).hue),
+			whiteness: getPercentage((value as HWBColor).whiteness),
+			blackness: getPercentage((value as HWBColor).blackness),
+		},
+		alpha ? (value as HWBAColor).alpha : undefined,
+	);
 }
 
 export function setRGBColor(state: ColorState, value: unknown, alpha: boolean): void {
@@ -197,23 +181,27 @@ export function setRGBColor(state: ColorState, value: unknown, alpha: boolean):
 		return;
 	}
 
-	const rgb = {
-		blue: getHexValue((value as RGBColor).blue),
-		green: getHexValue((value as RGBColor).green),
-		red: getHexValue((value as RGBColor).red),
-	};
-
-	const hsl = rgbToHsl(rgb);
+	setColorValue(
+		state,
+		TYPE_RGB,
+		{
+			red: getHexValue((value as RGBColor).red),
+			green: getHexValue((value as RGBColor).green),
+			blue: getHexValue((value as RGBColor).blue),
+		},
+		alpha ? (value as RGBAColor).alpha : undefined,
+	);
+}
 
-	state.hsl = hsl;
-	state.rgb = rgb;
+// #endregion
 
-	state.hex = hslToHex(hsl);
-	state.hwb = hslToHwb(hsl);
+// #region Variables
 
-	if (alpha) {
-		state.alpha = getAlpha((value as RGBAColor).alpha);
-	}
-}
+const getters: Record<ColorType, (state: ColorState, type: ColorType) => any> = {
+	hex: getColorFromHex,
+	hsl: getColorFromHsl,
+	hwb: getColorFromHwb,
+	rgb: getColorFromRgb,
+};
 
 // #endregion

package/src/color/models.ts

@@ -117,6 +117,13 @@ export type Color = {
 	 */
 	set hwba(value: HWBAColor);
 
+	/**
+	 * Last color format that was set on the color
+	 *
+	 * @returns Color type
+	 */
+	get origin(): ColorType;
+
 	/**
 	 * Get the color as an _RGB_ color
 	 *
@@ -259,10 +266,31 @@ export type ColorProperty = 'alpha' | keyof HSLColor | keyof HWBColor | keyof RG
 
 export type ColorState = {
 	alpha: Alpha;
-	hex: string;
-	hsl: HSLColor;
-	hwb: HWBColor;
-	rgb: RGBColor;
+	hex?: string;
+	hsl?: HSLColor;
+	hwb?: HWBColor;
+	origin: ColorType;
+	rgb?: RGBColor;
 };
 
+/**
+ * Base color types
+ */
+export type ColorType = 'hex' | 'hsl' | 'hwb' | 'rgb';
+
+/**
+ * Extended color types
+ */
+export type ColorTypeExtended = ColorType | 'hsla' | 'hwba' | 'rgba';
+
+/**
+ * Base color values
+ */
+export type ColorValue = string | HSLColor | HWBColor | RGBColor;
+
+/**
+ * Extended color values
+ */
+export type ColorValueExtended = ColorValue | HSLAColor | HWBAColor | RGBAColor;
+
 // #endregion

package/src/color/space/hex.ts

@@ -8,10 +8,22 @@ import {
 	LENGTH_LONG,
 	LENGTH_SHORT,
 	MAX_HEX,
+	TYPE_HSL,
+	TYPE_HWB,
+	TYPE_RGB,
 } from '../constants';
 import {getHexValue, getPercentage} from '../misc/get';
 import {isHexColor} from '../misc/is';
-import type {HSLAColor, HSLColor, HWBAColor, HWBColor, RGBAColor, RGBColor} from '../models';
+import type {
+	ColorState,
+	ColorType,
+	HSLAColor,
+	HSLColor,
+	HWBAColor,
+	HWBColor,
+	RGBAColor,
+	RGBColor,
+} from '../models';
 import {convertRgbToHsla, convertRgbToHwba} from './rgb';
 
 // #region Functions
@@ -35,6 +47,27 @@ function convertHexToRgba(value: string): RGBAColor {
 	};
 }
 
+export function getColorFromHex<Type extends ColorType>(
+	state: ColorState,
+	type: Type,
+): NonNullable<ColorState[Type]> {
+	switch (type) {
+		case TYPE_HSL:
+			state.hsl ??= hexToHsl(state.hex!);
+			break;
+
+		case TYPE_HWB:
+			state.hwb ??= hexToHwb(state.hex!);
+			break;
+
+		case TYPE_RGB:
+			state.rgb ??= hexToRgb(state.hex!);
+			break;
+	}
+
+	return state[type]!;
+}
+
 /**
  * Get the normalized hex color from a value
  *

package/src/color/space/hsl.ts

@@ -1,8 +1,25 @@
-import {DEFAULT_HSL, MAX_DEGREE, MAX_HEX, MAX_PERCENT} from '../constants';
+import {
+	DEFAULT_HSL,
+	MAX_DEGREE,
+	MAX_HEX,
+	MAX_PERCENT,
+	TYPE_HEX,
+	TYPE_HWB,
+	TYPE_RGB,
+} from '../constants';
 import {getAlphaValue} from '../misc/alpha';
 import {getDegrees, getHexValue, getPercentage} from '../misc/get';
 import {isHslLike} from '../misc/is';
-import type {HSLAColor, HSLColor, HWBAColor, HWBColor, RGBAColor, RGBColor} from '../models';
+import type {
+	ColorState,
+	ColorType,
+	HSLAColor,
+	HSLColor,
+	HWBAColor,
+	HWBColor,
+	RGBAColor,
+	RGBColor,
+} from '../models';
 import {convertRgbToHex} from './rgb';
 
 // #region Functions
@@ -49,6 +66,27 @@ function convertHslToRgba(input: unknown): RGBAColor {
 	};
 }
 
+export function getColorFromHsl<Type extends ColorType>(
+	state: ColorState,
+	type: Type,
+): NonNullable<ColorState[Type]> {
+	switch (type) {
+		case TYPE_HEX:
+			state.hex = hslToHex(state.hsl!);
+			break;
+
+		case TYPE_HWB:
+			state.hwb = hslToHwb(state.hsl!);
+			break;
+
+		case TYPE_RGB:
+			state.rgb = hslToRgb(state.hsl!);
+			break;
+	}
+
+	return state[type]!;
+}
+
 function getHexyValue(hue: number, lightness: number, saturation: number, value: number): number {
 	const part = (value + hue / 30) % 12;
 	const mod = saturation * Math.min(lightness, 1 - lightness);

package/src/color/space/hwb.ts

@@ -1,8 +1,17 @@
-import {DEFAULT_HWB, MAX_PERCENT} from '../constants';
+import {DEFAULT_HWB, MAX_PERCENT, TYPE_HEX, TYPE_HSL, TYPE_RGB} from '../constants';
 import {getAlphaValue} from '../misc/alpha';
 import {getDegrees, getPercentage} from '../misc/get';
 import {isHwbLike} from '../misc/is';
-import type {HSLAColor, HSLColor, HWBAColor, HWBColor, RGBAColor, RGBColor} from '../models';
+import type {
+	ColorState,
+	ColorType,
+	HSLAColor,
+	HSLColor,
+	HWBAColor,
+	HWBColor,
+	RGBAColor,
+	RGBColor,
+} from '../models';
 import {hslToRgb, hslToRgba} from './hsl';
 import {rgbToHex} from './rgb';
 
@@ -33,6 +42,27 @@ export function convertHwbToHsl(input: HWBAColor | HWBColor): HSLAColor {
 	};
 }
 
+export function getColorFromHwb<Type extends ColorType>(
+	state: ColorState,
+	type: Type,
+): NonNullable<ColorState[Type]> {
+	switch (type) {
+		case TYPE_HEX:
+			state.hex = hwbToHex(state.hwb!);
+			break;
+
+		case TYPE_HSL:
+			state.hsl = hwbToHsl(state.hwb!);
+			break;
+
+		case TYPE_RGB:
+			state.rgb = hwbToRgb(state.hwb!);
+			break;
+	}
+
+	return state[type]!;
+}
+
 function getHwbSaturation(blackness: number, whiteness: number, lightness: number): number {
 	const value = 1 - blackness;
 

package/src/color/space/rgb.ts

@@ -1,9 +1,18 @@
 import {join} from '../../internal/string';
-import {DEFAULT_RGB, MAX_HEX, MAX_PERCENT} from '../constants';
+import {DEFAULT_RGB, MAX_HEX, MAX_PERCENT, TYPE_HEX, TYPE_HSL, TYPE_HWB} from '../constants';
 import {getAlpha, getAlphaValue} from '../misc/alpha';
 import {getHexValue} from '../misc/get';
 import {isRgbLike} from '../misc/is';
-import type {HSLAColor, HSLColor, HWBAColor, HWBColor, RGBAColor, RGBColor} from '../models';
+import type {
+	ColorState,
+	ColorType,
+	HSLAColor,
+	HSLColor,
+	HWBAColor,
+	HWBColor,
+	RGBAColor,
+	RGBColor,
+} from '../models';
 
 // #region Types
 
@@ -32,7 +41,7 @@ export function convertRgbToHex(rgb: RGBAColor | RGBColor, alpha: boolean): stri
 	let a = '';
 
 	if (typeof alpha === 'boolean' && alpha) {
-		a = getAlpha((rgb as RGBAColor).alpha).hex;
+		a = getAlpha((rgb as RGBAColor).alpha, false).hex;
 	}
 
 	return `${hex}${a}`;
@@ -87,6 +96,27 @@ export function convertRgbToHwba(value: unknown): HWBAColor {
 	};
 }
 
+export function getColorFromRgb<Type extends ColorType>(
+	state: ColorState,
+	type: Type,
+): NonNullable<ColorState[Type]> {
+	switch (type) {
+		case TYPE_HEX:
+			state.hex = rgbToHex(state.rgb!);
+			break;
+
+		case TYPE_HSL:
+			state.hsl = rgbToHsl(state.rgb!);
+			break;
+
+		case TYPE_HWB:
+			state.hwb = rgbToHwb(state.rgb!);
+			break;
+	}
+
+	return state[type]!;
+}
+
 function getRgbHue(values: RgbValues): number {
 	const {blue, delta, green, max, red} = values;
 

package/dist/color/misc/index.d.mts

@@ -1,7 +0,0 @@
-import { ColorState } from "../models.mjs";
-//#region src/color/misc/index.d.ts
-declare function formatHslColor(state: ColorState, alpha: boolean): string;
-declare function formatHwbColor(state: ColorState, alpha: boolean): string;
-declare function formatRgbColor(state: ColorState, alpha: boolean): string;
-//#endregion
-export { formatHslColor, formatHwbColor, formatRgbColor };

package/dist/color/misc/index.mjs

@@ -1,15 +0,0 @@
-//#region src/color/misc/index.ts
-function formatHslColor(state, alpha) {
-	const { hue, lightness, saturation } = state.hsl;
-	return `hsl(${hue}deg ${saturation}% ${lightness}%${alpha ? ` / ${state.alpha.value}%` : ""})`;
-}
-function formatHwbColor(state, alpha) {
-	const { blackness, hue, whiteness } = state.hwb;
-	return `hwb(${hue}deg ${whiteness}% ${blackness}%${alpha ? ` / ${state.alpha.value}%` : ""})`;
-}
-function formatRgbColor(state, alpha) {
-	const { blue, green, red } = state.rgb;
-	return `rgb(${red} ${green} ${blue}${alpha ? ` / ${state.alpha.value}%` : ""})`;
-}
-//#endregion
-export { formatHslColor, formatHwbColor, formatRgbColor };

package/src/color/misc/index.ts

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