fix(bug): fixes an issue with saturation and lightness where addition…

…s/subtractions. Fixes #2

src/color/color-system/hsl.ts

@@ -0,0 +1,61 @@
+import {HslaTuple} from "./hsla";
+
+export type HslTuple = [number, string, string];
+
+/**
+ * Converts the given HSL Tuple into a proper HSL color
+ * @param {HslTuple|HslaTuple} tuple
+ * @return {string}
+ */
+export function hslTupleToHsl([H, S, L]: HslTuple | HslaTuple): string {
+ return `hsl(${H}, ${S}, ${L})`;
+}
+
+/**
+ * Adds lightness to the given HSL(a) tuple and returns a new one
+ * @param {HslTuple|HslaTuple} tuple
+ * @param {number} amount
+ * @return {HslTuple|HslaTuple}
+ */
+export function addLightnessToHslTuple(tuple: HslTuple | HslaTuple, amount: number): typeof tuple extends HslTuple ? HslTuple : HslaTuple {
+ const [H, S, inputL, A] = tuple;
+ const outputL = `${Math.max(0, Math.min(100, parseFloat(inputL) + amount))}%`;
+ return A != null ? [H, S, outputL, A] : (([H, S, outputL] as unknown) as HslaTuple);
+}
+
+/**
+ * Adds saturation to the given HSL(a) tuple and returns a new one
+ * @param {HslTuple|HslaTuple} tuple
+ * @param {number} amount
+ * @return {HslTuple|HslaTuple}
+ */
+export function addSaturationToToHslTuple(tuple: HslTuple | HslaTuple, amount: number): typeof tuple extends HslTuple ? HslTuple : HslaTuple {
+ const [H, inputS, L, A] = tuple;
+ const outputS = `${Math.max(0, Math.min(100, parseFloat(inputS) + amount))}%`;
+ return A != null ? [H, outputS, L, A] : (([H, outputS, L] as unknown) as HslaTuple);
+}
+
+/**
+ * Converts a string-represented HSL color to a tuple: [HUE: number, SATURATION: string, LIGHTNESS: string].
+ * @param {string} hsl - The HSL color to convert.
+ * @returns {HslTuple} The HSL color in a tuple representation.
+ * @throws {TypeError} If the first argument is not of type 'string'.
+ * @throws {TypeError} If the 'hue' couldn't be decoded from the given string.
+ * @throws {TypeError} If the 'saturation' couldn't be decoded from the given string.
+ * @throws {TypeError} If the 'lightness' couldn't be decoded from the given string.
+ */
+export function hslStringToHslTuple(hsl: string): HslTuple {
+ if (typeof hsl !== "string") throw new TypeError(`first argument to 'hslStringToHslTuple' must be of type 'string'!`);
+
+ const result = hsl.slice(hsl.indexOf("(") + 1, hsl.lastIndexOf(")")).split(",");
+
+ const HUE = parseInt(result[0]);
+ const SATURATION = result[1].trim();
+ const LIGHTNESS = result[2].trim();
+
+ if (isNaN(HUE)) throw new TypeError(`Couldn't decode the 'hue' value for the given hsl color: ${hsl}`);
+ if (isNaN(parseInt(SATURATION))) throw new TypeError(`Couldn't decode the 'saturation' value for the given hsl color: ${hsl}`);
+ if (isNaN(parseInt(LIGHTNESS))) throw new TypeError(`Couldn't decode the 'lightness' value for the given hsl color: ${hsl}`);
+
+ return [HUE, SATURATION.slice(SATURATION.length - 1) !== "%" ? `${SATURATION}%` : SATURATION, LIGHTNESS.slice(LIGHTNESS.length - 1) !== "%" ? `${LIGHTNESS}%` : LIGHTNESS];
+}

src/color/color-system/hsla.ts

@@ -0,0 +1,30 @@
+import {hslStringToHslTuple} from "./hsl";
+
+export type HslaTuple = [number, string, string, number];
+
+/**
+ * Converts the given HSLa Tuple into a proper HSLa color
+ * @param {HslaTuple} tuple
+ * @return {string}
+ */
+export function hslaTupleToHsla([H, S, L, A]: HslaTuple): string {
+ return `hsla(${H}, ${S}, ${L}, ${A})`;
+}
+
+/**
+ * Converts a string-represented HSLa color to a tuple: [HUE: number, SATURATION: string, LIGHTNESS: string, ALPHA: number].
+ * @param {string} hsla - The HSLA color to convert.
+ * @returns {HslaTuple} The HSLA color in a tuple representation.
+ * @throws {TypeError} If the 'alpha' couldn't be decoded from the given string.
+ */
+export function hslaStringToHslaTuple(hsla: string): HslaTuple {
+ if (typeof hsla !== "string") throw new TypeError(`first argument to 'hslaStringToHslaTuple' must be of type 'string'!`);
+
+ const [HUE, SATURATION, LIGHTNESS] = hslStringToHslTuple(hsla);
+ const result = hsla.slice(hsla.indexOf("(") + 1, hsla.lastIndexOf(")")).split(",");
+ const ALPHA = parseFloat(result[result.length - 1]);
+
+ if (isNaN(ALPHA)) throw new TypeError(`Couldn't decode the 'alpha' value for the given hsla color: ${hsla}`);
+
+ return [HUE, SATURATION.slice(SATURATION.length - 1) !== "%" ? `${SATURATION}%` : SATURATION, LIGHTNESS.slice(LIGHTNESS.length - 1) !== "%" ? `${LIGHTNESS}%` : LIGHTNESS, ALPHA];
+}

src/color/color-system/hsv.ts

@@ -0,0 +1,36 @@
+export type HsvTuple = [number, number, number];
+
+/**
+ * Converts the given HSV Tuple into a proper HSV color
+ * @param {HsvTuple} tuple
+ * @param{"hsb"|"hsv"} hsbOrHsv
+ * @return {string}
+ */
+export function hsvTupleToHsv([H, S, V]: HsvTuple, hsbOrHsv: "hsb" | "hsv" = "hsb"): string {
+ return `${hsbOrHsv}(${H}, ${S}, ${V})`;
+}
+
+/**
+ * Generates a tuple-representation of an HSV/HSB color.
+ * @param {string} hsvString - An HSV/HSB string. For instance, hsb(5, 10, 20).
+ * @returns {HsvTuple} A tuple representation of the HSV color.
+ * @throws {TypeError} If the first argument is not of type 'string'.
+ * @throws {TypeError} If an HSV color couldn't be extracted from the given string.
+ */
+export function hsvStringToHsvTuple(hsvString: string): HsvTuple {
+ if (typeof hsvString !== "string") throw new TypeError(`first argument must be of type 'string'!`);
+ let hsv = hsvString.match(/hsv\((.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/);
+ if (hsv == null) hsv = hsvString.match(/hsb\((.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/);
+
+ if (hsv == null) throw new TypeError(`Couldn't decode an HSV color from the given input: ${hsvString}`);
+
+ const h = parseFloat(hsv[1]);
+ const s = parseFloat(hsv[2]);
+ const v = parseFloat(hsv[3]);
+
+ if (isNaN(h)) throw new TypeError(`Couldn't decode the 'Hue' value of the given HSV color: '${hsvString}'.`);
+ if (isNaN(s)) throw new TypeError(`Couldn't decode the 'Saturation' value of the given HSV color: '${hsvString}'.`);
+ if (isNaN(v)) throw new TypeError(`Couldn't decode the 'Value/Brightness' value of the given HSV color: '${hsvString}'.`);
+
+ return [h, s, v];
+}

src/color/color-system/html-color.ts

@@ -0,0 +1,146 @@
+/**
+ * A map between HTML color names and their hex values.
+ * @type {Record<string, string>}
+ */
+export const HTML_COLOR: Record<string, string> = {
+ aliceblue: "#f0f8ff",
+ antiquewhite: "#faebd7",
+ aqua: "#00ffff",
+ aquamarine: "#7fffd4",
+ azure: "#f0ffff",
+ beige: "#f5f5dc",
+ bisque: "#ffe4c4",
+ black: "#000000",
+ blanchedalmond: "#ffebcd",
+ blue: "#0000ff",
+ blueviolet: "#8a2be2",
+ brown: "#a52a2a",
+ burlywood: "#deb887",
+ cadetblue: "#5f9ea0",
+ chartreuse: "#7fff00",
+ chocolate: "#d2691e",
+ coral: "#ff7f50",
+ cornflowerblue: "#6495ed",
+ cornsilk: "#fff8dc",
+ crimson: "#dc143c",
+ cyan: "#00ffff",
+ darkblue: "#00008b",
+ darkcyan: "#008b8b",
+ darkgoldenrod: "#b8860b",
+ darkgray: "#a9a9a9",
+ darkgreen: "#006400",
+ darkkhaki: "#bdb76b",
+ darkmagenta: "#8b008b",
+ darkolivegreen: "#556b2f",
+ darkorange: "#ff8c00",
+ darkorchid: "#9932cc",
+ darkred: "#8b0000",
+ darksalmon: "#e9967a",
+ darkseagreen: "#8fbc8f",
+ darkslateblue: "#483d8b",
+ darkslategray: "#2f4f4f",
+ darkturquoise: "#00ced1",
+ darkviolet: "#9400d3",
+ deeppink: "#ff1493",
+ deepskyblue: "#00bfff",
+ dimgray: "#696969",
+ dodgerblue: "#1e90ff",
+ firebrick: "#b22222",
+ floralwhite: "#fffaf0",
+ forestgreen: "#228b22",
+ fuchsia: "#ff00ff",
+ gainsboro: "#dcdcdc",
+ ghostwhite: "#f8f8ff",
+ gold: "#ffd700",
+ goldenrod: "#daa520",
+ gray: "#808080",
+ green: "#008000",
+ greenyellow: "#adff2f",
+ honeydew: "#f0fff0",
+ hotpink: "#ff69b4",
+ "indianred ": "#cd5c5c",
+ indigo: "#4b0082",
+ ivory: "#fffff0",
+ khaki: "#f0e68c",
+ lavender: "#e6e6fa",
+ lavenderblush: "#fff0f5",
+ lawngreen: "#7cfc00",
+ lemonchiffon: "#fffacd",
+ lightblue: "#add8e6",
+ lightcoral: "#f08080",
+ lightcyan: "#e0ffff",
+ lightgoldenrodyellow: "#fafad2",
+ lightgrey: "#d3d3d3",
+ lightgreen: "#90ee90",
+ lightpink: "#ffb6c1",
+ lightsalmon: "#ffa07a",
+ lightseagreen: "#20b2aa",
+ lightskyblue: "#87cefa",
+ lightslategray: "#778899",
+ lightsteelblue: "#b0c4de",
+ lightyellow: "#ffffe0",
+ lime: "#00ff00",
+ limegreen: "#32cd32",
+ linen: "#faf0e6",
+ magenta: "#ff00ff",
+ maroon: "#800000",
+ mediumaquamarine: "#66cdaa",
+ mediumblue: "#0000cd",
+ mediumorchid: "#ba55d3",
+ mediumpurple: "#9370d8",
+ mediumseagreen: "#3cb371",
+ mediumslateblue: "#7b68ee",
+ mediumspringgreen: "#00fa9a",
+ mediumturquoise: "#48d1cc",
+ mediumvioletred: "#c71585",
+ midnightblue: "#191970",
+ mintcream: "#f5fffa",
+ mistyrose: "#ffe4e1",
+ moccasin: "#ffe4b5",
+ navajowhite: "#ffdead",
+ navy: "#000080",
+ oldlace: "#fdf5e6",
+ olive: "#808000",
+ olivedrab: "#6b8e23",
+ orange: "#ffa500",
+ orangered: "#ff4500",
+ orchid: "#da70d6",
+ palegoldenrod: "#eee8aa",
+ palegreen: "#98fb98",
+ paleturquoise: "#afeeee",
+ palevioletred: "#d87093",
+ papayawhip: "#ffefd5",
+ peachpuff: "#ffdab9",
+ peru: "#cd853f",
+ pink: "#ffc0cb",
+ plum: "#dda0dd",
+ powderblue: "#b0e0e6",
+ purple: "#800080",
+ red: "#ff0000",
+ rosybrown: "#bc8f8f",
+ royalblue: "#4169e1",
+ saddlebrown: "#8b4513",
+ salmon: "#fa8072",
+ sandybrown: "#f4a460",
+ seagreen: "#2e8b57",
+ seashell: "#fff5ee",
+ sienna: "#a0522d",
+ silver: "#c0c0c0",
+ skyblue: "#87ceeb",
+ slateblue: "#6a5acd",
+ slategray: "#708090",
+ snow: "#fffafa",
+ springgreen: "#00ff7f",
+ steelblue: "#4682b4",
+ tan: "#d2b48c",
+ teal: "#008080",
+ thistle: "#d8bfd8",
+ tomato: "#ff6347",
+ turquoise: "#40e0d0",
+ violet: "#ee82ee",
+ wheat: "#f5deb3",
+ white: "#ffffff",
+ whitesmoke: "#f5f5f5",
+ yellow: "#ffff00",
+ yellowgreen: "#9acd32"
+};

src/color/color-system/rgb.ts

@@ -0,0 +1,33 @@
+export type RgbTuple = [number, number, number];
+
+/**
+ * Converts the given RGB Tuple into a proper RGB color
+ * @param {RgbTuple} tuple
+ * @return {string}
+ */
+export function rgbTupleToRgb([R, G, B]: RgbTuple): string {
+ return `rgb(${R}, ${G}, ${B})`;
+}
+
+/**
+ * Generates a tuple-representation of an RGB color: [RED: number, GREEN: number, BLUE: number].
+ * @param {string} rgbString - An RGB string. For instance, rgb(RGB_MAX_VALUE, RGB_MAX_VALUE, RGB_MAX_VALUE).
+ * @returns {RgbTuple} A tuple representation of the RGB color.
+ * @throws {TypeError} If the first argument is not of type 'string'.
+ * @throws {TypeError} If an RGB color couldn't be extracted from the given string.
+ */
+export function rgbStringToRgbTuple(rgbString: string): RgbTuple {
+ if (typeof rgbString !== "string") throw new TypeError(`first argument must be of type 'string'!`);
+ const rgb = rgbString.match(/rgb\((.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/);
+ if (rgb == null) throw new TypeError(`'rgbToHex()' couldn't decode an RGB color from the given input: ${rgbString}`);
+
+ const r = parseFloat(rgb[1]);
+ const g = parseFloat(rgb[2]);
+ const b = parseFloat(rgb[3]);
+
+ if (isNaN(r)) throw new TypeError(`'rgbToString()' couldn't decode the 'red' value of the given RGB color: '${rgbString}'.`);
+ if (isNaN(g)) throw new TypeError(`'rgbToString()' couldn't decode the 'green' value of the given RGB color: '${rgbString}'.`);
+ if (isNaN(b)) throw new TypeError(`'rgbToString()' couldn't decode the 'blue' value of the given RGB color: '${rgbString}'.`);
+
+ return [r, g, b];
+}

src/color/color-system/rgba.ts

@@ -0,0 +1,37 @@
+import {RgbTuple} from "./rgb";
+
+export type RgbaTuple = [number, number, number, number];
+
+/**
+ * Converts the given RGBa Tuple into a proper RGBa color
+ * @param {RgbaTuple|RgbTuple} tuple
+ * @return {string}
+ */
+export function rgbaTupleToRgba([R, G, B, A]: RgbTuple | RgbaTuple): string {
+ return `rgba(${R}, ${G}, ${B}, ${A})`;
+}
+
+/**
+ * Generates a tuple-representation of an RGBa color: [RED: number, GREEN: number, BLUE: number, ALPHA: number].
+ * @param {string} rgbaString - An RGBa string. For instance, rgb(RGB_MAX_VALUE, RGB_MAX_VALUE, RGB_MAX_VALUE, 0.4).
+ * @returns {RgbaTuple} A tuple representation of the RGBa color.
+ * @throws {TypeError} If the first argument is not of type 'string'.
+ * @throws {TypeError} If an RGBa color couldn't be extracted from the given string.
+ */
+export function rgbaStringToRgbaTuple(rgbaString: string): RgbaTuple {
+ if (typeof rgbaString !== "string") throw new TypeError(`first argument must be of type 'string'!`);
+ const rgba = rgbaString.match(/rgba\((.+)\s*,\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/);
+ if (rgba == null) throw new TypeError(`Couldn't decode an RGBa color from the given input: ${rgbaString}`);
+
+ const r = parseFloat(rgba[1]);
+ const g = parseFloat(rgba[2]);
+ const b = parseFloat(rgba[3]);
+ const a = parseFloat(rgba[4]);
+
+ if (isNaN(r)) throw new TypeError(`Couldn't decode the 'red' value of the given RGBa color: '${rgbaString}'.`);
+ if (isNaN(g)) throw new TypeError(`Couldn't decode the 'green' value of the given RGBa color: '${rgbaString}'.`);
+ if (isNaN(b)) throw new TypeError(`Couldn't decode the 'blue' value of the given RGBa color: '${rgbaString}'.`);
+ if (isNaN(a)) throw new TypeError(`Couldn't decode the 'alpha' value of the given RGBa color: '${rgbaString}'.`);
+
+ return [r, g, b, a];
+}

src/color/constant.ts

@@ -0,0 +1,5 @@
+/**
+ * The maximum possible RGB value
+ * @type {number}
+ */
+export const RGB_MAX_VALUE: number = 255;