@ui5/webcomponents-base 0.0.0-b4cbc43ba → 0.0.0-b93c2a321

package/dist/theming/getEffectiveLinksHrefs.js

@@ -0,0 +1,27 @@
+import { getUrl } from "../CSP.js";
+import { getFeature } from "../FeaturesRegistry.js";
+
+const flatten = arr => {
+	return arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatten(val) : val), []);
+};
+
+const getEffectiveLinksHrefs = (ElementClass, forStaticArea = false) => {
+	let stylesData = ElementClass[forStaticArea ? "staticAreaStyles" : "styles"];
+	const OpenUI5Enablement = getFeature("OpenUI5Enablement");
+
+	if (!stylesData) {
+		return;
+	}
+
+	if (!Array.isArray(stylesData)) {
+		stylesData = [stylesData];
+	}
+
+	if (OpenUI5Enablement) {
+		stylesData.push(OpenUI5Enablement.getBusyIndicatorStyles());
+	}
+
+	return flatten(stylesData).filter(data => !!data).map(data => getUrl(data.packageName, data.fileName));
+};
+
+export default getEffectiveLinksHrefs;

package/dist/theming/getEffectiveStyle.js

@@ -1,5 +1,6 @@
 import { getCustomCSS, attachCustomCSSChange } from "./CustomStyle.js";
 import getStylesString from "./getStylesString.js";
+import { getFeature } from "../FeaturesRegistry.js";
 
 const effectiveStyleMap = new Map();
 
@@ -10,9 +11,15 @@ attachCustomCSSChange(tag => {
 const getEffectiveStyle = (ElementClass, forStaticArea = false) => {
 	const tag = ElementClass.getMetadata().getTag();
 	const key = `${tag}_${forStaticArea ? "static" : "normal"}`;
+	const OpenUI5Enablement = getFeature("OpenUI5Enablement");
 
 	if (!effectiveStyleMap.has(key)) {
 		let effectiveStyle;
+		let busyIndicatorStyles = "";
+
+		if (OpenUI5Enablement) {
+			busyIndicatorStyles = getStylesString(OpenUI5Enablement.getBusyIndicatorStyles());
+		}
 
 		if (forStaticArea) {
 			effectiveStyle = getStylesString(ElementClass.staticAreaStyles);
@@ -21,6 +28,8 @@ const getEffectiveStyle = (ElementClass, forStaticArea = false) => {
 			const builtInStyles = getStylesString(ElementClass.styles);
 			effectiveStyle = `${builtInStyles} ${customStyle}`;
 		}
+
+		effectiveStyle = `${effectiveStyle} ${busyIndicatorStyles}`;
 		effectiveStyleMap.set(key, effectiveStyle);
 	}
 

package/dist/theming/getStylesString.js

@@ -1,9 +1,11 @@
 const getStylesString = styles => {
 	if (Array.isArray(styles)) {
-		return flatten(styles.filter(style => !!style)).join(" ");
+		return flatten(styles.filter(style => !!style)).map(style => {
+			return typeof style === "string" ? style : style.content;
+		}).join(" ");
 	}
 
-	return styles;
+	return typeof styles === "string" ? styles : styles.content;
 };
 
 const flatten = arr => {

package/dist/theming/getThemeDesignerTheme.js

@@ -1,15 +1,26 @@
+const warnings = new Set();
+
 const getThemeMetadata = () => {
 	// Check if the class was already applied, most commonly to the link/style tag with the CSS Variables
-	let el = document.querySelector(".sapThemeMetaData-Base-baseLib");
+	let el = document.querySelector(".sapThemeMetaData-Base-baseLib") || document.querySelector(".sapThemeMetaData-UI5-sap-ui-core");
 	if (el) {
 		return getComputedStyle(el).backgroundImage;
 	}
 
 	el = document.createElement("span");
 	el.style.display = "none";
+
+	// Try with sapThemeMetaData-Base-baseLib first
 	el.classList.add("sapThemeMetaData-Base-baseLib");
 	document.body.appendChild(el);
-	const metadata = getComputedStyle(el).backgroundImage;
+	let metadata = getComputedStyle(el).backgroundImage;
+
+	// Try with sapThemeMetaData-UI5-sap-ui-core only if the previous selector was not found
+	if (metadata === "none") {
+		el.classList.add("sapThemeMetaData-UI5-sap-ui-core");
+		metadata = getComputedStyle(el).backgroundImage;
+	}
+
 	document.body.removeChild(el);
 
 	return metadata;
@@ -24,14 +35,20 @@ const parseThemeMetadata = metadataString => {
 			try {
 				paramsString = decodeURIComponent(paramsString);
 			} catch (ex) {
-				console.warn("Malformed theme metadata string, unable to decodeURIComponent"); // eslint-disable-line
+				if (!warnings.has("decode")) {
+					console.warn("Malformed theme metadata string, unable to decodeURIComponent"); // eslint-disable-line
+					warnings.add("decode");
+				}
 				return;
 			}
 		}
 		try {
 			return JSON.parse(paramsString);
 		} catch (ex) {
-			console.warn("Malformed theme metadata string, unable to parse JSON"); // eslint-disable-line
+			if (!warnings.has("parse")) {
+				console.warn("Malformed theme metadata string, unable to parse JSON"); // eslint-disable-line
+				warnings.add("parse");
+			}
 		}
 	}
 };
@@ -44,7 +61,10 @@ const processThemeMetadata = metadata => {
 		themeName = metadata.Path.match(/\.([^.]+)\.css_variables$/)[1];
 		baseThemeName = metadata.Extends[0];
 	} catch (ex) {
-		console.warn("Malformed theme metadata Object", metadata); // eslint-disable-line
+		if (!warnings.has("object")) {
+			console.warn("Malformed theme metadata Object", metadata); // eslint-disable-line
+			warnings.add("object");
+		}
 		return;
 	}
 

package/dist/theming/preloadLinks.js

@@ -0,0 +1,23 @@
+import getEffectiveLinksHrefs from "./getEffectiveLinksHrefs.js";
+import createLinkInHead from "../util/createLinkInHead.js";
+import { shouldUseLinks, shouldPreloadLinks } from "../CSP.js";
+
+const preloaded = new Set();
+
+const preloadLinks = ElementClass => {
+	if (!shouldUseLinks() || !shouldPreloadLinks()) {
+		return;
+	}
+
+	const linksHrefs = getEffectiveLinksHrefs(ElementClass, false) || [];
+	const staticAreaLinksHrefs = getEffectiveLinksHrefs(ElementClass, true) || [];
+
+	[...linksHrefs, ...staticAreaLinksHrefs].forEach(href => {
+		if (!preloaded.has(href)) {
+			createLinkInHead(href, { rel: "preload", as: "style" });
+			preloaded.add(href);
+		}
+	});
+};
+
+export default preloadLinks;

package/dist/types/CSSColor.js

@@ -0,0 +1,9 @@
+import DataType from "./DataType.js";
+
+class CSSColor extends DataType {
+	static isValid(value) {
+		return /^(#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})|rgb\(\s*((1?[0-9]?[0-9]|2([0-4][0-9]|5[0-5]))|([0-9]?[0-9](\.[0-9]+)?|100(\.0+)?)%)\s*(,\s*((1?[0-9]?[0-9]|2([0-4][0-9]|5[0-5]))|([0-9]?[0-9](\.[0-9]+)?|100(\.0+)?)%)\s*){2}\)|rgba\((\s*((1?[0-9]?[0-9]|2([0-4][0-9]|5[0-5]))|([0-9]?[0-9](\.[0-9]+)?|100(\.0+)?)%)\s*,){3}\s*(0(\.[0-9]+)?|1(\.0+)?)\s*\)|hsl\(\s*([0-2]?[0-9]?[0-9]|3([0-5][0-9]|60))\s*(,\s*(([0-9]?[0-9](\.[0-9]+)?|100(\.0+)?)%)\s*){2}\)|hsla\(\s*([0-2]?[0-9]?[0-9]|3([0-5][0-9]|60))\s*,(\s*(([0-9]?[0-9](\.[0-9]+)?|100(\.0+)?)%)\s*,){2}\s*(0(\.[0-9]+)?|1(\.0+)?)\s*\)|aliceblue|antiquewhite|aqua|aquamarine|azure|beige|bisque|black|blanchedalmond|blue|blueviolet|brown|burlywood|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan|darkgoldenrod|darkgray|darkgrey|darkgreen|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen|fuchsia|gainsboro|ghostwhite|gold|goldenrod|gray|grey|green|greenyellow|honeydew|hotpink|indianred|indigo|ivory|khaki|lavender|lavenderblush|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgray|lightgrey|lightgreen|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray|lightslategrey|lightsteelblue|lightyellow|lime|limegreen|linen|magenta|maroon|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|navy|oldlace|olive|olivedrab|orange|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|purple|red|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|silverskyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|teal|thistle|tomato|turquoise|violet|wheat|white|whitesmoke|yellow|yellowgreen|transparent|inherit|)$/.test(value ); // eslint-disable-line
+	}
+}
+
+export default CSSColor;

package/dist/types/DataType.js

@@ -11,6 +11,18 @@ class DataType {
 	static isValid(value) {
 	}
 
+	static attributeToProperty(attributeValue) {
+		return attributeValue;
+	}
+
+	static propertyToAttribute(propertyValue) {
+		return `${propertyValue}`;
+	}
+
+	static valuesAreEqual(value1, value2) {
+		return value1 === value2;
+	}
+
 	static generateTypeAccessors(types) {
 		Object.keys(types).forEach(type => {
 			Object.defineProperty(this, type, {

package/dist/types/Float.js

@@ -5,6 +5,10 @@ class Float extends DataType {
 		// Assuming that integers are floats as well!
 		return Number(value) === value;
 	}
+
+	static attributeToProperty(attributeValue) {
+		return parseFloat(attributeValue);
+	}
 }
 
 export default Float;

package/dist/types/Integer.js

@@ -4,6 +4,10 @@ class Integer extends DataType {
 	static isValid(value) {
 		return Number.isInteger(value);
 	}
+
+	static attributeToProperty(attributeValue) {
+		return parseInt(attributeValue);
+	}
 }
 
 export default Integer;

package/dist/types/InvisibleMessageMode.js

@@ -0,0 +1,30 @@
+import DataType from "./DataType.js";
+
+/**
+ * Enumeration for different mode behaviors of the <code>InvisibleMessage</code>.
+ * @private
+ */
+const InvisibleMessageModes = {
+
+	/**
+     * Indicates that updates to the region should be presented at the next graceful opportunity,
+     * such as at the end of reading the current sentence, or when the user pauses typing.
+     */
+	Polite: "Polite",
+
+	/**
+     * Indicates that updates to the region have the highest priority and should be presented to the user immediately.
+     */
+	Assertive: "Assertive",
+
+};
+
+class InvisibleMessageMode extends DataType {
+	static isValid(value) {
+		return !!InvisibleMessageModes[value];
+	}
+}
+
+InvisibleMessageMode.generateTypeAccessors(InvisibleMessageModes);
+
+export default InvisibleMessageModes;

package/dist/updateShadowRoot.js

@@ -1,7 +1,9 @@
 import executeTemplate from "./renderer/executeTemplate.js";
 import getConstructableStyle from "./theming/getConstructableStyle.js";
 import getEffectiveStyle from "./theming/getEffectiveStyle.js";
+import getEffectiveLinksHrefs from "./theming/getEffectiveLinksHrefs.js";
 import isLegacyBrowser from "./isLegacyBrowser.js";
+import { shouldUseLinks } from "./CSP.js";
 
 /**
  * Updates the shadow root of a UI5Element or its static area item
@@ -9,18 +11,20 @@ import isLegacyBrowser from "./isLegacyBrowser.js";
  * @param forStaticArea
  */
 const updateShadowRoot = (element, forStaticArea = false) => {
-	let styleToPrepend;
+	let styleStrOrHrefsArr;
 	const template = forStaticArea ? "staticAreaTemplate" : "template";
 	const shadowRoot = forStaticArea ? element.staticAreaItem.shadowRoot : element.shadowRoot;
 	const renderResult = executeTemplate(element.constructor[template], element);
 
-	if (document.adoptedStyleSheets) { // Chrome
+	if (shouldUseLinks()) {
+		styleStrOrHrefsArr = getEffectiveLinksHrefs(element.constructor, forStaticArea);
+	} else if (document.adoptedStyleSheets) { // Chrome
 		shadowRoot.adoptedStyleSheets = getConstructableStyle(element.constructor, forStaticArea);
 	} else if (!isLegacyBrowser()) { // FF, Safari
-		styleToPrepend = getEffectiveStyle(element.constructor, forStaticArea);
+		styleStrOrHrefsArr = getEffectiveStyle(element.constructor, forStaticArea);
 	}
 
-	element.constructor.render(renderResult, shadowRoot, styleToPrepend, { eventContext: element });
+	element.constructor.render(renderResult, shadowRoot, styleStrOrHrefsArr, forStaticArea, { host: element });
 };
 
 export default updateShadowRoot;

package/dist/util/AriaLabelHelper.js

@@ -1,9 +1,9 @@
 import findNodeOwner from "./findNodeOwner.js";
 
 const getEffectiveAriaLabelText = el => {
-	if (!el.ariaLabelledby) {
-		if (el.ariaLabel) {
-			return el.ariaLabel;
+	if (!el.accessibleNameRef) {
+		if (el.accessibleName) {
+			return el.accessibleName;
 		}
 
 		return undefined;
@@ -19,7 +19,7 @@ const getEffectiveAriaLabelText = el => {
  * @param {String} readyIds (Optional) Defines a string of elements ids. The text of these elements will be returned. If used you should provide either el or ownerDocument
  */
 const getAriaLabelledByTexts = (el, ownerDocument, readyIds = "") => {
-	const ids = (readyIds && readyIds.split(" ")) || el.ariaLabelledby.split(" ");
+	const ids = (readyIds && readyIds.split(" ")) || el.accessibleNameRef.split(" ");
 	const owner = ownerDocument || findNodeOwner(el);
 	let result = "";
 

package/dist/util/ColorConversion.js

@@ -0,0 +1,370 @@
+/**
+ *
+ * @param {String} color Color in one of the following formats: RGBA or HEX
+ */
+
+/**
+ * Map of CSS colors to hex representation
+ */
+const CSSColors = {
+	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",
+	darkgrey: "a9a9a9",
+	darkgreen: "006400",
+	darkkhaki: "bdb76b",
+	darkmagenta: "8b008b",
+	darkolivegreen: "556b2f",
+	darkorange: "ff8c00",
+	darkorchid: "9932cc",
+	darkred: "8b0000",
+	darksalmon: "e9967a",
+	darkseagreen: "8fbc8f",
+	darkslateblue: "483d8b",
+	darkslategray: "2f4f4f",
+	darkslategrey: "2f4f4f",
+	darkturquoise: "00ced1",
+	darkviolet: "9400d3",
+	deeppink: "ff1493",
+	deepskyblue: "00bfff",
+	dimgray: "696969",
+	dimgrey: "696969",
+	dodgerblue: "1e90ff",
+	firebrick: "b22222",
+	floralwhite: "fffaf0",
+	forestgreen: "228b22",
+	fuchsia: "ff00ff",
+	gainsboro: "dcdcdc",
+	ghostwhite: "f8f8ff",
+	gold: "ffd700",
+	goldenrod: "daa520",
+	gray: "808080",
+	grey: "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",
+	lightgray: "d3d3d3",
+	lightgrey: "d3d3d3",
+	lightgreen: "90ee90",
+	lightpink: "ffb6c1",
+	lightsalmon: "ffa07a",
+	lightseagreen: "20b2aa",
+	lightskyblue: "87cefa",
+	lightslategray: "778899",
+	lightslategrey: "778899",
+	lightsteelblue: "b0c4de",
+	lightyellow: "ffffe0",
+	lime: "00ff00",
+	limegreen: "32cd32",
+	linen: "faf0e6",
+	magenta: "ff00ff",
+	maroon: "800000",
+	mediumaquamarine: "66cdaa",
+	mediumblue: "0000cd",
+	mediumorchid: "ba55d3",
+	mediumpurple: "9370db",
+	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: "db7093",
+	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",
+	slategrey: "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",
+	transparent: "00000000",
+};
+
+const getRGBColor = color => {
+	if (color.startsWith("rgba")) {
+		return RGBAToRGB(color);
+	}
+
+	if (color.startsWith("rgb")) {
+		return RGBToRGB(color);
+	}
+
+	// HEX
+	if (color.indexOf("#") === 0) {
+		// Shorthand Syntax
+		if (color.length === 4) {
+			color = `${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}`;
+		} else {
+			color = color.slice(1, color.length);
+		}
+	}
+
+	// Css Color
+	if (Object.keys(CSSColors).includes(color)) {
+		color = CSSColors[color];
+	}
+
+	return HEXToRGB(color);
+};
+
+/**
+ * Return an object with the properties for each of the main colors(red, green, blue)
+ * @param {String} color Receives a color in the following format: "rgba(0, 0, 0, 1)
+ */
+const RGBAToRGB = color => {
+	const openingBracketIndex = color.indexOf("("),
+		commasIndexes = [];
+
+	for (let i = 0; i < color.length; i++) {
+		if (color[i] === ",") {
+			commasIndexes.push(i);
+		}
+	}
+
+	return {
+		r: parseInt(color.slice(openingBracketIndex + 1, commasIndexes[0]).trim()),
+		g: parseInt(color.slice(commasIndexes[0] + 1, commasIndexes[1]).trim()),
+		b: parseInt(color.slice(commasIndexes[1] + 1, commasIndexes[2]).trim()),
+	};
+};
+
+/**
+ * Return an object with the properties for each of the main colors(red, green, blue)
+ * @param {String} color Receives a color in the following format: "rgb(0, 0, 0)
+ */
+const RGBToRGB = color => {
+	const openingBracketIndex = color.indexOf("("),
+		closingBraketIndex = color.indexOf(")"),
+		commasIndexes = [];
+
+	for (let i = 0; i < color.length; i++) {
+		if (color[i] === ",") {
+			commasIndexes.push(i);
+		}
+	}
+
+	return {
+		r: parseInt(color.slice(openingBracketIndex + 1, commasIndexes[0]).trim()),
+		g: parseInt(color.slice(commasIndexes[0] + 1, commasIndexes[1]).trim()),
+		b: parseInt(color.slice(commasIndexes[1] + 1, closingBraketIndex).trim()),
+	};
+};
+
+const HSLToRGB = (color = {
+	h: undefined,
+	s: undefined,
+	l: undefined,
+}) => {
+	// Formula taken from https://www.rapidtables.com/convert/color/hsl-to-rgb.html
+	const C = (1 - Math.abs((2 * color.l) - 1)) * color.s,
+		X = C * (1 - Math.abs(((color.h / 60) % 2) - 1)),
+		m = color.l - C / 2;
+
+	let tempColor = {};
+	switch (Math.round(color.h / 60)) {
+	// 0 ≤ H < 60
+	case 0:
+		tempColor = {
+			r: C,
+			g: X,
+			b: 0,
+		};
+		break;
+
+	// 60 ≤ H < 120
+	case 1:
+		tempColor = {
+			r: X,
+			g: C,
+			b: 0,
+		};
+		break;
+
+	// 120 ≤ H < 180
+	case 2:
+		tempColor = {
+			r: 0,
+			g: C,
+			b: X,
+		};
+		break;
+
+	// 180 ≤ H < 240
+	case 3:
+		tempColor = {
+			r: 0,
+			g: X,
+			b: C,
+		};
+		break;
+
+	// 240 ≤ H < 300
+	case 4:
+		tempColor = {
+			r: X,
+			g: 0,
+			b: C,
+		};
+		break;
+
+	// 300 ≤ H < 360
+	default:
+		tempColor = {
+			r: C,
+			g: 0,
+			b: X,
+		};
+	}
+
+	return {
+		r: Math.floor((tempColor.r + m) * 255),
+		g: Math.floor((tempColor.g + m) * 255),
+		b: Math.floor((tempColor.b + m) * 255),
+	};
+};
+
+const HEXToRGB = hex => {
+	// Please make sure you pass a valid 6 digit hex color
+	// In the implementation of this method we assume that the hex argument is a 6 digit valid hex color
+
+	const rgbValues = {
+		r: hex.substr(0, 2),
+		g: hex.substr(2, 2),
+		b: hex.substr(4, 2),
+	};
+
+	const rgbKeys = Object.keys(rgbValues);
+
+	rgbKeys.forEach(key => {
+		rgbValues[key] = parseInt(rgbValues[key], 16);
+	});
+
+	return rgbValues;
+};
+
+const RGBToHSL = (color = {
+	r: undefined,
+	g: undefined,
+	b: undefined,
+}) => {
+	const R = color.r / 255,
+		G = color.g / 255,
+		B = color.b / 255,
+		max = Math.max(R, G, B),
+		min = Math.min(R, G, B),
+		delta = max - min;
+
+	let h,
+		s;
+
+	// Hue calculation
+	if (delta === 0) {
+		h = 0;
+	} else if (max === R) {
+		h = 60 * (((G - B) / delta) % 6);
+	} else if (max === G) {
+		h = 60 * (((B - R) / delta) + 2);
+	} else if (max === B) {
+		h = 60 * (((R - G) / delta) + 4);
+	}
+
+	// Lightness calculation
+	const l = (max + min) / 2;
+
+	// Saturation calculation
+	if (delta === 0) {
+		s = 0;
+	} else {
+		s = delta / (1 - Math.abs(2 * l - 1));
+	}
+
+	return {
+		h,
+		s,
+		l,
+	};
+};
+
+export {
+	getRGBColor,
+	HSLToRGB,
+	HEXToRGB,
+	RGBToHSL,
+};