@oscarpalmer/atoms 0.191.0 → 0.193.0

package/src/color/misc/format.ts

@@ -1,23 +1,23 @@
-import {TYPE_HSL, TYPE_HWB, TYPE_RGB} from '../constants';
+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, TYPE_HSL);
+	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, TYPE_HWB);
+	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, TYPE_RGB);
+	const {blue, green, red} = getColorFromState(state, COLOR_TYPE.rgb);
 
 	return `rgb(${red} ${green} ${blue}${getSuffix(state, alpha)})`;
 }

package/src/color/misc/get.ts

@@ -1,25 +1,6 @@
 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,
-	TYPE_HEX,
-	TYPE_HSL,
-	TYPE_HWB,
-	TYPE_RGB,
-} 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 {getColorFromState, getColorState} from './state';
@@ -60,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 rgb = getColorFromState(getColorState(value), TYPE_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);
 }
@@ -113,15 +96,15 @@ export function getHexaColor(value: unknown): string {
  * @returns Hex color string
  */
 export function getHexColor(value: unknown): string {
-	return getColorFromState(getColorState(value), TYPE_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);
 }
 
 /**
@@ -135,7 +118,7 @@ export function getDegrees(value: unknown): number {
  */
 export function getHslaColor(value: unknown): HSLAColor {
 	const state = getColorState(value);
-	const hsl = getColorFromState(state, TYPE_HSL);
+	const hsl = getColorFromState(state, COLOR_TYPE.hsl);
 
 	return {
 		...hsl,
@@ -153,7 +136,7 @@ export function getHslaColor(value: unknown): HSLAColor {
  * @returns _HWB_ color
  */
 export function getHwbColor(value: unknown): HWBColor {
-	return getColorFromState(getColorState(value), TYPE_HWB);
+	return getColorFromState(getColorState(value), COLOR_TYPE.hwb);
 }
 
 /**
@@ -167,7 +150,7 @@ export function getHwbColor(value: unknown): HWBColor {
  */
 export function getHwbaColor(value: unknown): HWBAColor {
 	const state = getColorState(value);
-	const hwb = getColorFromState(state, TYPE_HWB);
+	const hwb = getColorFromState(state, COLOR_TYPE.hwb);
 
 	return {
 		...hwb,
@@ -185,11 +168,11 @@ export function getHwbaColor(value: unknown): HWBAColor {
  * @returns _HSL_ color
  */
 export function getHslColor(value: unknown): HSLColor {
-	return getColorFromState(getColorState(value), TYPE_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);
 }
 
 /**
@@ -203,7 +186,7 @@ export function getPercentage(value: unknown): number {
  */
 export function getRgbaColor(value: unknown): RGBAColor {
 	const state = getColorState(value);
-	const rgb = getColorFromState(state, TYPE_RGB);
+	const rgb = getColorFromState(state, COLOR_TYPE.rgb);
 
 	return {
 		...rgb,
@@ -221,7 +204,7 @@ export function getRgbaColor(value: unknown): RGBAColor {
  * @returns _RGB_ color
  */
 export function getRgbColor(value: unknown): RGBColor {
-	return getColorFromState(getColorState(value), TYPE_RGB);
+	return getColorFromState(getColorState(value), COLOR_TYPE.rgb);
 }
 
 // #endregion

package/src/color/misc/is.ts

@@ -1,22 +1,13 @@
+import {isPlainObject} from '../../internal/is';
 import {between} from '../../internal/number';
 import type {PlainObject} from '../../models';
 import {
-	ALPHA_NONE_VALUE,
-	EXPRESSION_HEX_LONG,
-	EXPRESSION_HEX_SHORT,
-	EXPRESSION_PREFIX,
-	KEYS_HSL,
-	KEYS_HSLA,
-	KEYS_HWB,
-	KEYS_HWBA,
-	KEYS_RGB,
-	KEYS_RGBA,
-	LENGTH_LONG,
-	LENGTH_SHORT,
-	MAX_DEGREE,
-	MAX_HEX,
-	MAX_PERCENT,
-	PROPERTY_COLOR,
+	COLOR_ALPHA,
+	COLOR_EXPRESSION,
+	COLOR_KEYS,
+	COLOR_LENGTHS,
+	COLOR_MAX,
+	COLOR_PROPERTY,
 } from '../constants';
 import type {Color} from '../index';
 import type {
@@ -36,11 +27,11 @@ function hasKeys(value: unknown, keys: ColorProperty[]): boolean {
 }
 
 function isAlpha(value: unknown): value is number {
-	return typeof value === 'number' && between(value, ALPHA_NONE_VALUE, MAX_PERCENT);
+	return typeof value === 'number' && between(value, COLOR_ALPHA.noneValue, COLOR_MAX.percent);
 }
 
 function isBytey(value: unknown): value is number {
-	return typeof value === 'number' && between(value, 0, MAX_HEX);
+	return typeof value === 'number' && between(value, 0, COLOR_MAX.hex);
 }
 
 /**
@@ -51,10 +42,7 @@ function isBytey(value: unknown): value is number {
  */
 export function isColor(value: unknown): value is Color {
 	return (
-		typeof value === 'object' &&
-		value !== null &&
-		PROPERTY_COLOR in value &&
-		value[PROPERTY_COLOR] === true
+		isPlainObject(value) && COLOR_PROPERTY.name in value && value[COLOR_PROPERTY.name] === true
 	);
 }
 
@@ -87,7 +75,7 @@ function isColorValue(obj: unknown, properties: ColorProperty[]): boolean {
 }
 
 function isDegree(value: unknown): value is number {
-	return typeof value === 'number' && between(value, 0, MAX_DEGREE);
+	return typeof value === 'number' && between(value, 0, COLOR_MAX.degree);
 }
 
 /**
@@ -111,14 +99,16 @@ export function isHexColor(value: unknown, alpha?: boolean): value is string {
 		return false;
 	}
 
-	if (!(EXPRESSION_HEX_SHORT.test(value) || EXPRESSION_HEX_LONG.test(value))) {
+	if (!(COLOR_EXPRESSION.hexShort.test(value) || COLOR_EXPRESSION.hexLong.test(value))) {
 		return false;
 	}
 
 	if (alpha === false) {
-		const unprefixed = value.replace(EXPRESSION_PREFIX, '');
+		const unprefixed = value.replace(COLOR_EXPRESSION.prefix, '');
 
-		return unprefixed.length === LENGTH_SHORT || unprefixed.length === LENGTH_LONG;
+		return (
+			unprefixed.length === COLOR_LENGTHS.hexShort || unprefixed.length === COLOR_LENGTHS.hexLong
+		);
 	}
 
 	return true;
@@ -131,11 +121,11 @@ export function isHexColor(value: unknown, alpha?: boolean): value is string {
  * @returns `true` if the value is an _HSLA_ color, otherwise `false`
  */
 export function isHslaColor(value: unknown): value is HSLAColor {
-	return isColorValue(value, KEYS_HSLA);
+	return isColorValue(value, COLOR_KEYS.hsla);
 }
 
 export function isHslaLike(value: unknown): value is Record<keyof HSLAColor, unknown> {
-	return hasKeys(value, KEYS_HSLA);
+	return hasKeys(value, COLOR_KEYS.hsla);
 }
 
 /**
@@ -145,11 +135,11 @@ export function isHslaLike(value: unknown): value is Record<keyof HSLAColor, unk
  * @returns `true` if the value is an _HSL_ color, otherwise `false`
  */
 export function isHslColor(value: unknown): value is HSLColor {
-	return isColorValue(value, KEYS_HSLA) || isColorValue(value, KEYS_HSL);
+	return isColorValue(value, COLOR_KEYS.hsla) || isColorValue(value, COLOR_KEYS.hsl);
 }
 
 export function isHslLike(value: unknown): value is Record<keyof HSLColor, unknown> {
-	return hasKeys(value, KEYS_HSL);
+	return hasKeys(value, COLOR_KEYS.hsl);
 }
 
 /**
@@ -159,11 +149,11 @@ export function isHslLike(value: unknown): value is Record<keyof HSLColor, unkno
  * @returns `true` if the value is an _HWBA_ color, otherwise `false`
  */
 export function isHwbaColor(value: unknown): value is HWBAColor {
-	return isColorValue(value, KEYS_HWBA);
+	return isColorValue(value, COLOR_KEYS.hwba);
 }
 
 export function isHwbaLike(value: unknown): value is Record<keyof HWBAColor, unknown> {
-	return hasKeys(value, KEYS_HWBA);
+	return hasKeys(value, COLOR_KEYS.hwba);
 }
 
 /**
@@ -173,11 +163,11 @@ export function isHwbaLike(value: unknown): value is Record<keyof HWBAColor, unk
  * @returns `true` if the value is an _HWB_ color, otherwise `false`
  */
 export function isHwbColor(value: unknown): value is HWBColor {
-	return isColorValue(value, KEYS_HWB) || isColorValue(value, KEYS_HWBA);
+	return isColorValue(value, COLOR_KEYS.hwb) || isColorValue(value, COLOR_KEYS.hwba);
 }
 
 export function isHwbLike(value: unknown): value is Record<keyof HWBColor, unknown> {
-	return hasKeys(value, KEYS_HWB);
+	return hasKeys(value, COLOR_KEYS.hwb);
 }
 
 /**
@@ -187,11 +177,11 @@ export function isHwbLike(value: unknown): value is Record<keyof HWBColor, unkno
  * @returns `true` if the value is an _RGBA_ color, otherwise `false`
  */
 export function isRgbaColor(value: unknown): value is RGBAColor {
-	return isColorValue(value, KEYS_RGBA);
+	return isColorValue(value, COLOR_KEYS.rgba);
 }
 
 export function isRgbaLike(value: unknown): value is Record<keyof RGBAColor, unknown> {
-	return hasKeys(value, KEYS_RGBA);
+	return hasKeys(value, COLOR_KEYS.rgba);
 }
 
 /**
@@ -201,15 +191,15 @@ export function isRgbaLike(value: unknown): value is Record<keyof RGBAColor, unk
  * @returns `true` if the value is an _RGB_ color, otherwise `false`
  */
 export function isRgbColor(value: unknown): value is RGBColor {
-	return isColorValue(value, KEYS_RGBA) || isColorValue(value, KEYS_RGB);
+	return isColorValue(value, COLOR_KEYS.rgba) || isColorValue(value, COLOR_KEYS.rgb);
 }
 
 export function isRgbLike(value: unknown): value is Record<keyof RGBColor, unknown> {
-	return hasKeys(value, KEYS_RGB);
+	return hasKeys(value, COLOR_KEYS.rgb);
 }
 
 function isPercentage(value: unknown): value is number {
-	return typeof value === 'number' && between(value, 0, MAX_PERCENT);
+	return typeof value === 'number' && between(value, 0, COLOR_MAX.percent);
 }
 
 // #endregion

package/src/color/misc/state.ts

@@ -1,19 +1,7 @@
-import {
-	DEFAULT_HSL,
-	DEFAULT_HWB,
-	DEFAULT_RGB,
-	HEX_BLACK,
-	KEYS_HSL,
-	KEYS_HWB,
-	KEYS_RGB,
-	LENGTH_LONG,
-	MAX_PERCENT,
-	TYPE_HEX,
-	TYPE_HSL,
-	TYPE_HWB,
-	TYPE_RGB,
-} from '../constants';
+import type {Subscriptions} from '../../internal/subscription';
+import {COLOR_DEFAULTS, COLOR_KEYS, COLOR_LENGTHS, COLOR_MAX, COLOR_TYPE} from '../constants';
 import type {
+	Color,
 	ColorState,
 	ColorType,
 	HSLAColor,
@@ -67,15 +55,15 @@ export function getColorState(value: unknown): ColorState {
 			origin: undefined as never,
 		};
 
-		if (KEYS_HSL.every(key => key in value)) {
+		if (COLOR_KEYS.hsl.every(key => key in value)) {
 			state.hsl = getHslValue(value as Record<keyof HSLColor, unknown>);
-			state.origin = TYPE_HSL;
-		} else if (KEYS_HWB.every(key => key in value)) {
+			state.origin = COLOR_TYPE.hsl;
+		} else if (COLOR_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.origin = COLOR_TYPE.hwb;
+		} else if (COLOR_KEYS.rgb.every(key => key in value)) {
 			state.rgb = getRgbValue(value as Record<keyof RGBColor, unknown>);
-			state.origin = TYPE_RGB;
+			state.origin = COLOR_TYPE.rgb;
 		}
 
 		if (state.origin != null) {
@@ -88,28 +76,30 @@ export function getColorState(value: unknown): ColorState {
 
 function getColorStateForHex(value: string): ColorState {
 	const normalized = getNormalizedHex(value, true);
-	const hex = normalized.slice(0, LENGTH_LONG);
+	const hex = normalized.slice(0, COLOR_LENGTHS.hexLong);
 
 	return {
 		hex,
-		alpha: getAlpha(normalized.slice(LENGTH_LONG), true),
-		origin: TYPE_HEX,
+		alpha: getAlpha(normalized.slice(COLOR_LENGTHS.hexLong), true),
+		origin: COLOR_TYPE.hex,
 	};
 }
 
 function getDefaultColorState(): ColorState {
 	return {
-		alpha: getAlpha(MAX_PERCENT, false),
-		hex: HEX_BLACK,
-		hsl: {...DEFAULT_HSL},
-		hwb: {...DEFAULT_HWB},
-		rgb: {...DEFAULT_RGB},
-		origin: TYPE_HEX,
+		alpha: getAlpha(COLOR_MAX.percent, false),
+		hex: COLOR_DEFAULTS.hexBlack,
+		hsl: {...COLOR_DEFAULTS.hsl},
+		hwb: {...COLOR_DEFAULTS.hwb},
+		rgb: {...COLOR_DEFAULTS.rgb},
+		origin: COLOR_TYPE.hex,
 	};
 }
 
 function setColorValue<Type extends ColorType>(
+	color: Color,
 	state: ColorState,
+	subscriptions: Subscriptions<Function>,
 	type: Type,
 	value: ColorState[Type],
 	alpha?: number | string,
@@ -123,11 +113,31 @@ function setColorValue<Type extends ColorType>(
 	state[type] = value;
 
 	if (alpha != null) {
-		state.alpha = getAlpha(alpha, type === TYPE_HEX);
+		state.alpha = getAlpha(alpha, type === COLOR_TYPE.hex);
+	}
+
+	for (const type of COLOR_TYPE.all) {
+		const callbacks = subscriptions.values.to.keyed?.get(type);
+
+		if (callbacks != null) {
+			for (const callback of callbacks.values()) {
+				callback(color[type]);
+			}
+		}
+	}
+
+	for (const callback of subscriptions.values.to.any.values()) {
+		callback(color);
 	}
 }
 
-export function setHexColor(state: ColorState, value: string, alpha: boolean): void {
+export function setHexColor(
+	color: Color,
+	state: ColorState,
+	subscriptions: Subscriptions<Function>,
+	value: string,
+	alpha: boolean,
+): void {
 	if (!isHexColor(value) || (!alpha && value === state.hex)) {
 		return;
 	}
@@ -135,21 +145,31 @@ export function setHexColor(state: ColorState, value: string, alpha: boolean): v
 	const normalized = getNormalizedHex(value, true);
 
 	setColorValue(
+		color,
 		state,
-		TYPE_HEX,
-		normalized.slice(0, LENGTH_LONG),
-		alpha ? normalized.slice(LENGTH_LONG) : undefined,
+		subscriptions,
+		COLOR_TYPE.hex,
+		normalized.slice(0, COLOR_LENGTHS.hexLong),
+		alpha ? normalized.slice(COLOR_LENGTHS.hexLong) : undefined,
 	);
 }
 
-export function setHSLColor(state: ColorState, value: unknown, alpha: boolean): void {
+export function setHSLColor(
+	color: Color,
+	state: ColorState,
+	subscriptions: Subscriptions<Function>,
+	value: unknown,
+	alpha: boolean,
+): void {
 	if (!isHslLike(value)) {
 		return;
 	}
 
 	setColorValue(
+		color,
 		state,
-		TYPE_HSL,
+		subscriptions,
+		COLOR_TYPE.hsl,
 		{
 			hue: getDegrees((value as HSLColor).hue),
 			saturation: getPercentage((value as HSLColor).saturation),
@@ -159,14 +179,22 @@ export function setHSLColor(state: ColorState, value: unknown, alpha: boolean):
 	);
 }
 
-export function setHWBColor(state: ColorState, value: unknown, alpha: boolean): void {
+export function setHWBColor(
+	color: Color,
+	state: ColorState,
+	subscriptions: Subscriptions<Function>,
+	value: unknown,
+	alpha: boolean,
+): void {
 	if (!isHwbLike(value)) {
 		return;
 	}
 
 	setColorValue(
+		color,
 		state,
-		TYPE_HWB,
+		subscriptions,
+		COLOR_TYPE.hwb,
 		{
 			hue: getDegrees((value as HWBColor).hue),
 			whiteness: getPercentage((value as HWBColor).whiteness),
@@ -176,14 +204,22 @@ export function setHWBColor(state: ColorState, value: unknown, alpha: boolean):
 	);
 }
 
-export function setRGBColor(state: ColorState, value: unknown, alpha: boolean): void {
+export function setRGBColor(
+	color: Color,
+	state: ColorState,
+	subscriptions: Subscriptions<Function>,
+	value: unknown,
+	alpha: boolean,
+): void {
 	if (!isRgbLike(value)) {
 		return;
 	}
 
 	setColorValue(
+		color,
 		state,
-		TYPE_RGB,
+		subscriptions,
+		COLOR_TYPE.rgb,
 		{
 			red: getHexValue((value as RGBColor).red),
 			green: getHexValue((value as RGBColor).green),

package/src/color/models.ts

@@ -1,5 +1,8 @@
 // #region Types
 
+import type {Subscription} from '../internal/subscription';
+import type {COLOR_ALPHA, COLOR_TYPE} from './constants';
+
 export type Alpha = {
 	hex: string;
 	value: number;
@@ -152,6 +155,85 @@ export type Color = {
 	 */
 	set rgba(value: RGBAColor);
 
+	/**
+	 * Subscribe to alpha channel _(opacity)_ changes of the color
+	 *
+	 * @param key Color property to subscribe to
+	 * @param callback Callback function for changes
+	 */
+	subscribe(key: 'alpha', callback: (value: number) => void): Subscription;
+
+	/**
+	 * Subscribe to hex color changes of the color
+	 *
+	 * @param key Color type to subscribe to
+	 * @param callback Callback function for changes
+	 */
+	subscribe(key: typeof COLOR_TYPE.hex, callback: (value: string) => void): Subscription;
+
+	/**
+	 * Subscribe to hex color changes of the color with alpha channel _(opacity)_
+	 *
+	 * @param key Color type to subscribe to
+	 * @param callback Callback function for changes
+	 */
+	subscribe(key: typeof COLOR_TYPE.hexa, callback: (value: string) => void): Subscription;
+
+	/**
+	 * Subscribe to _HSL_ color changes of the color
+	 *
+	 * @param key Color type to subscribe to
+	 * @param callback Callback function for changes
+	 */
+	subscribe(key: typeof COLOR_TYPE.hsl, callback: (value: HSLColor) => void): Subscription;
+
+	/**
+	 * Subscribe to _HSL(A)_ color changes of the color
+	 *
+	 * @param key Color type to subscribe to
+	 * @param callback Callback function for changes
+	 */
+	subscribe(key: typeof COLOR_TYPE.hsla, callback: (value: HSLAColor) => void): Subscription;
+
+	/**
+	 * Subscribe to _HWB_ color changes of the color
+	 *
+	 * @param key Color type to subscribe to
+	 * @param callback Callback function for changes
+	 */
+	subscribe(key: typeof COLOR_TYPE.hwb, callback: (value: HWBColor) => void): Subscription;
+
+	/**
+	 * Subscribe to _HWB(A)_ color changes of the color
+	 *
+	 * @param key Color type to subscribe to
+	 * @param callback Callback function for changes
+	 */
+	subscribe(key: typeof COLOR_TYPE.hwba, callback: (value: HWBAColor) => void): Subscription;
+
+	/**
+	 * Subscribe to _RGB_ color changes of the color
+	 *
+	 * @param key Color type to subscribe to
+	 * @param callback Callback function for changes
+	 */
+	subscribe(key: typeof COLOR_TYPE.rgb, callback: (value: RGBColor) => void): Subscription;
+
+	/**
+	 * Subscribe to _RGBA_ color changes of the color
+	 *
+	 * @param key Color type to subscribe to
+	 * @param callback Callback function for changes
+	 */
+	subscribe(key: typeof COLOR_TYPE.rgba, callback: (value: RGBAColor) => void): Subscription;
+
+	/**
+	 * Subscribe to any color changes of the color
+	 *
+	 * @param callback Callback function for changes
+	 */
+	subscribe(callback: (value: Color) => void): Subscription;
+
 	/**
 	 * Get the color as a hex string
 	 *
@@ -190,6 +272,13 @@ export type Color = {
 	 * @returns Hex color string
 	 */
 	toString(): string;
+
+	/**
+	 * Unsubscribe from all color changes of the color
+	 *
+	 * _(To unsubscribe from a specific color change, use the `unsubscribe()` method on the `Subscription` returned by the individual `subscribe()` method)_
+	 */
+	unsubscribe(): void;
 };
 
 type ColorWithAlpha = {
@@ -262,7 +351,11 @@ export type RGBColor = {
 	red: number;
 };
 
-export type ColorProperty = 'alpha' | keyof HSLColor | keyof HWBColor | keyof RGBColor;
+export type ColorProperty =
+	| typeof COLOR_ALPHA.name
+	| keyof HSLColor
+	| keyof HWBColor
+	| keyof RGBColor;
 
 export type ColorState = {
 	alpha: Alpha;