UNPKG

json2scss-map

Version:

This is an utility tool for the developers to customizing colors, fonts & other whitelabel stuff and compiling into SCSS variable. So, anyone can change the look & feel of your app in just few steps.

763 lines (625 loc) 20.7 kB
'use strict'; /** * Convert any 3 or 6 digit HEX color into HSL * @author AS Developers 2021 MIT License * @params H:<String>, newSyntax:<boolean> * @returns HSL Color (String) */ Object.defineProperty(exports, "__esModule", { value: true }); exports.stringToRGBA = exports.stringToRGB = exports.stringToHSLA = exports.stringToHSL = exports.rgbaToHSLA = exports.rgbaToHEXA = exports.rgbToHEX = exports.hexToRGB = exports.hexToHSL = exports.hexAToRGBA = exports.hexAToHSLA = exports.RGBtoCL4RGB = exports.RGBToHSL = exports.RGBAtoCL4RGB = exports.HSLToRGB = exports.HSLToHEX = exports.HSLToCL4HSL = exports.HSLAToRGBA = exports.HSLAToHEXA = exports.HSLAToCL4HSL = void 0; var hexToHSL = function hexToHSL(H) { var newSyntax = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; // Convert hex to RGB first var r = 0, g = 0, b = 0; if (H.length == 4) { r = "0x" + H[1] + H[1]; g = "0x" + H[2] + H[2]; b = "0x" + H[3] + H[3]; } else if (H.length == 7) { r = "0x" + H[1] + H[2]; g = "0x" + H[3] + H[4]; b = "0x" + H[5] + H[6]; } // Then to HSL r /= 255; g /= 255; b /= 255; var cmin = Math.min(r, g, b), cmax = Math.max(r, g, b), delta = cmax - cmin, h = 0, s = 0, l = 0; if (delta == 0) h = 0;else if (cmax == r) h = (g - b) / delta % 6;else if (cmax == g) h = (b - r) / delta + 2;else h = (r - g) / delta + 4; h = Math.round(h * 60); if (h < 0) h += 360; l = (cmax + cmin) / 2; s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)); s = +(s * 100).toFixed(1); l = +(l * 100).toFixed(1); if (newSyntax) { return "hsl(".concat(h, " ").concat(s, "% ").concat(l, "%)"); } else { return "hsl(" + h + ", " + s + "%, " + l + "%)"; } }; /** * Convert any 4 or 8 digit HEX alpha color into HSLA * @author AS Developers 2021 MIT License * @params H:<String>, newSyntax:<boolean> * @returns HSLA Color:<String> */ exports.hexToHSL = hexToHSL; var hexAToHSLA = function hexAToHSLA(H) { var newSyntax = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; var r = 0, g = 0, b = 0, a = 1; if (H.length == 5) { r = "0x" + H[1] + H[1]; g = "0x" + H[2] + H[2]; b = "0x" + H[3] + H[3]; a = "0x" + H[4] + H[4]; } else if (H.length == 9) { r = "0x" + H[1] + H[2]; g = "0x" + H[3] + H[4]; b = "0x" + H[5] + H[6]; a = "0x" + H[7] + H[8]; } // Then to HSL r /= 255; g /= 255; b /= 255; var cmin = Math.min(r, g, b), cmax = Math.max(r, g, b), delta = cmax - cmin, h = 0, s = 0, l = 0; if (delta == 0) h = 0;else if (cmax == r) h = (g - b) / delta % 6;else if (cmax == g) h = (b - r) / delta + 2;else h = (r - g) / delta + 4; h = Math.round(h * 60); if (h < 0) h += 360; l = (cmax + cmin) / 2; s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)); s = +(s * 100).toFixed(1); l = +(l * 100).toFixed(1); a = (a / 255).toFixed(2); if (newSyntax) { return "hsl(" + h + " " + s + "% " + l + "% / " + a * 100 + "%)"; } return "hsla(" + h + ", " + s + "%, " + l + "%, " + a + ")"; }; /** * Convert rgba string into R: red,G:<green>,B:<blue> colors * @author AS Developers 2021 MIT License * @params rgba as string * @returns red, green, blue and alpha value as numbers */ exports.hexAToHSLA = hexAToHSLA; var stringToRGBA = function stringToRGBA(rgba) { var sep = rgba.indexOf(",") > -1 ? "," : " "; rgba = rgba.substr(5).split(")")[0].split(sep); // Strip the slash if using space-separated syntax if (rgba.indexOf("/") > -1) rgba.splice(3, 1); for (var R in rgba) { var _r = rgba[R]; if (_r.indexOf("%") > -1) { var p = _r.substr(0, _r.length - 1) / 100; if (R < 3) { rgba[R] = Math.round(p * 255); } else { rgba[R] = p; } } } // Make r, g, and b fractions of 1 var r = rgba[0], g = rgba[1], b = rgba[2], a = rgba[3]; return { red: r, green: g, blue: b, alpha: a }; }; /** * Convert rgb string into R: red,G:<green>,B:<blue> colors * @author AS Developers 2021 MIT License * @params rgb as string * @returns red, green, blue value as numbers */ exports.stringToRGBA = stringToRGBA; var stringToRGB = function stringToRGB(rgb) { var sep = rgb.indexOf(",") > -1 ? "," : " "; rgb = rgb.substr(4).split(")")[0].split(sep); // Strip the slash if using space-separated syntax if (rgb.indexOf("/") > -1) rgb.splice(3, 1); for (var R in rgb) { var _r2 = rgb[R]; if (_r2.indexOf("%") > -1) { var p = _r2.substr(0, _r2.length - 1) / 100; if (R < 3) { rgb[R] = Math.round(p * 255); } } } // Make r, g, and b fractions of 1 var r = rgb[0], g = rgb[1], b = rgb[2]; return { red: r, green: g, blue: b }; }; /** * Convert R,G,B into HSL colors also support New Syntax * @author AS Developers 2021 MIT License * @params red , green, blue value as numbers * @returns HSL color String based on newSyntax param true / false */ exports.stringToRGB = stringToRGB; var RGBToHSL = function RGBToHSL(r, g, b) { var newSyntax = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false; // Make r, g, and b fractions of 1 r /= 255; g /= 255; b /= 255; // Find greatest and smallest channel values var cmin = Math.min(r, g, b), cmax = Math.max(r, g, b), delta = cmax - cmin, h = 0, s = 0, l = 0; // Calculate hue // No difference if (delta == 0) h = 0; // Red is max else if (cmax == r) h = (g - b) / delta % 6; // Green is max else if (cmax == g) h = (b - r) / delta + 2; // Blue is max else h = (r - g) / delta + 4; h = Math.round(h * 60); // Make negative hues positive behind 360° if (h < 0) h += 360; // Calculate lightness l = (cmax + cmin) / 2; // Calculate saturation s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)); // Multiply l and s by 100 s = +(s * 100).toFixed(1); l = +(l * 100).toFixed(1); if (newSyntax) { return "hsl(" + h + " " + s + "% " + l + "%)"; } return "hsl(" + h + ", " + s + "%, " + l + "%)"; }; /** * Convert R,G,B,A into HSL colors also support New Syntax * @author AS Developers 2021 MIT License * @params red , green, blue and alpha value as numbers * @returns HSL color String based on newSyntax param true / false */ exports.RGBToHSL = RGBToHSL; var rgbaToHSLA = function rgbaToHSLA(r, g, b, a) { var newSyntax = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false; // Make r, g, and b fractions of 1 r /= 255; g /= 255; b /= 255; // Find greatest and smallest channel values var cmin = Math.min(r, g, b), cmax = Math.max(r, g, b), delta = cmax - cmin, h = 0, s = 0, l = 0; // Calculate hue // No difference if (delta == 0) h = 0; // Red is max else if (cmax == r) h = (g - b) / delta % 6; // Green is max else if (cmax == g) h = (b - r) / delta + 2; // Blue is max else h = (r - g) / delta + 4; h = Math.round(h * 60); // Make negative hues positive behind 360° if (h < 0) h += 360; // Calculate lightness l = (cmax + cmin) / 2; // Calculate saturation s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)); // Multiply l and s by 100 s = +(s * 100).toFixed(1); l = +(l * 100).toFixed(1); if (newSyntax) { return "hsl(" + h + " " + s + "% " + l + "% / " + a * 100 + "%)"; } return "hsla(" + h + ", " + s + "%, " + l + "%, " + a + ")"; }; /** * Convert H(Hue), S(Saturation), L(Lightness) into Color Lavel 4 Syntax * @author AS Developers 2021 MIT License * @params h, s, l as numbers * @returns HSL color String based on newSyntax param true / false */ exports.rgbaToHSLA = rgbaToHSLA; var HSLToCL4HSL = function HSLToCL4HSL(h, s, l) { var newSyntax = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false; if (newSyntax) { return "hsl(" + h + " " + s + "% " + l + "%)"; } return "hsl(" + h + ", " + s + "%, " + l + "%)"; }; /** * Convert H(Hue), S(Saturation), L(Lightness),A (Alpha) into Color Lavel 4 Syntax * @author AS Developers 2021 MIT License * @params h, s, l, a as numbers * @returns HSL color String based on newSyntax param true / false */ exports.HSLToCL4HSL = HSLToCL4HSL; var HSLAToCL4HSL = function HSLAToCL4HSL(h, s, l, a) { var newSyntax = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false; if (newSyntax) { return "hsl(" + h + " " + s + "% " + l + "% / " + a * 100 + "%)"; } return "hsla(" + h + ", " + s + "%, " + l + "%, " + a + ")"; }; /** * Convert R(Red),G(Green),B(Blue) into Color Lavel 4 Syntax * @author AS Developers 2021 MIT License * @params r, g,b as numbers * @returns RGB color String based on newSyntax param true / false */ exports.HSLAToCL4HSL = HSLAToCL4HSL; var RGBtoCL4RGB = function RGBtoCL4RGB(r, g, b) { var newSyntax = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false; if (newSyntax) { return "rgb(" + r + " " + g + " " + b + ")"; } return "rgb(" + r + ", " + g + ", " + b + ")"; }; /** * Convert R(Red),G(Green),B(Blue), A(Alpha) into Color Lavel 4 Syntax * @author AS Developers 2021 MIT License * @params r, g,b,a as numbers * @returns RGBA color String based on newSyntax param true / false */ exports.RGBtoCL4RGB = RGBtoCL4RGB; var RGBAtoCL4RGB = function RGBAtoCL4RGB(r, g, b, a) { var newSyntax = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false; if (newSyntax) { return "rgb(" + r + " " + g + " " + b + " / " + a * 100 + "%)"; } return "rgba(" + r + ", " + g + ", " + b + ", " + a + ")"; }; /** * Convert H(HEX) colors into RGB colors * @author AS Developers 2021 MIT License * @params Hex as string * @returns RGB color String based on newSyntax param true / false */ exports.RGBAtoCL4RGB = RGBAtoCL4RGB; var hexToRGB = function hexToRGB(h) { var newSyntax = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; var r = 0, g = 0, b = 0; // 3 digits if (h.length == 4) { r = "0x" + h[1] + h[1]; g = "0x" + h[2] + h[2]; b = "0x" + h[3] + h[3]; // 6 digits } else if (h.length == 7) { r = "0x" + h[1] + h[2]; g = "0x" + h[3] + h[4]; b = "0x" + h[5] + h[6]; } if (newSyntax) { return "rgb(" + +r + " " + +g + " " + +b + ")"; } return "rgb(" + +r + ", " + +g + ", " + +b + ")"; }; /** * Convert H(HEXA) colors into RGBA colors * @author AS Developers 2021 MIT License * @params HexA as string * @returns RGBA color String based on newSyntax param true / false */ exports.hexToRGB = hexToRGB; var hexAToRGBA = function hexAToRGBA(h) { var newSyntax = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; var r = 0, g = 0, b = 0, a = 1; if (h.length == 5) { r = "0x" + h[1] + h[1]; g = "0x" + h[2] + h[2]; b = "0x" + h[3] + h[3]; a = "0x" + h[4] + h[4]; } else if (h.length == 9) { r = "0x" + h[1] + h[2]; g = "0x" + h[3] + h[4]; b = "0x" + h[5] + h[6]; a = "0x" + h[7] + h[8]; } a = +(a / 255).toFixed(2); if (newSyntax) { return "rgb(" + +r + " " + +g + " " + +b + " / " + a * 100 + "%)"; } return "rgba(" + +r + ", " + +g + ", " + +b + ", " + a + ")"; }; /** * Convert HSL colors string into H(Hue), S(Saturation), L(Lightness) * @author AS Developers 2021 MIT License * @params Hsl color as string * @returns H(Hue), S(Saturation), L(Lightness) as numbers */ exports.hexAToRGBA = hexAToRGBA; var stringToHSL = function stringToHSL(hsl) { var sep = hsl.indexOf(",") > -1 ? "," : " "; hsl = hsl.substr(4).split(")")[0].split(sep); var h = hsl[0], s = hsl[1].substr(0, hsl[1].length - 1), l = hsl[2].substr(0, hsl[2].length - 1); // Strip label and convert to degrees (if necessary) if (h.indexOf("deg") > -1) h = h.substr(0, h.length - 3);else if (h.indexOf("rad") > -1) h = Math.round(h.substr(0, h.length - 3) * (180 / Math.PI));else if (h.indexOf("turn") > -1) h = Math.round(h.substr(0, h.length - 4) * 360); // Keep hue fraction of 360 if ending up over if (h >= 360) h %= 360; return { hue: h, saturation: s, lightness: l }; }; /** * Convert H(Hue), S(Saturation), L(Lightness) colors RGB value also String output * @author AS Developers 2021 MIT License * @params H(Hue), S(Saturation), L(Lightness) as numbers, returnValue (true/false), newSyntax( true / false) * @returns if return value true then output rgb as numbers for forther use otherwise output rgb color string */ exports.stringToHSL = stringToHSL; var HSLToRGB = function HSLToRGB(h, s, l) { var returnValue = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false; var newSyntax = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false; // Must be fractions of 1 s /= 100; l /= 100; var c = (1 - Math.abs(2 * l - 1)) * s, x = c * (1 - Math.abs(h / 60 % 2 - 1)), m = l - c / 2, r = 0, g = 0, b = 0; if (0 <= h && h < 60) { r = c; g = x; b = 0; } else if (60 <= h && h < 120) { r = x; g = c; b = 0; } else if (120 <= h && h < 180) { r = 0; g = c; b = x; } else if (180 <= h && h < 240) { r = 0; g = x; b = c; } else if (240 <= h && h < 300) { r = x; g = 0; b = c; } else if (300 <= h && h < 360) { r = c; g = 0; b = x; } r = Math.round((r + m) * 255); g = Math.round((g + m) * 255); b = Math.round((b + m) * 255); if (returnValue) { return { r: r, g: g, b: b }; } else { if (newSyntax) { return "rgb(" + r + " " + g + " " + b + ")"; } return "rgb(" + r + ", " + g + ", " + b + ")"; } }; /** * Convert HSLA colors string into H(Hue), S(Saturation), L(Lightness), A(Alpha) * @author AS Developers 2021 MIT License * @params Hsla color as string * @returns H(Hue), S(Saturation), L(Lightness), A(Alpha) as numbers */ exports.HSLToRGB = HSLToRGB; var stringToHSLA = function stringToHSLA(hsla) { var sep = hsla.indexOf(",") > -1 ? "," : " "; hsla = hsla.substr(5).split(")")[0].split(sep); if (hsla.indexOf("/") > -1) hsla.splice(3, 1); var h = hsla[0], s = hsla[1].substr(0, hsla[1].length - 1), l = hsla[2].substr(0, hsla[2].length - 1), a = hsla[3]; if (h.indexOf("deg") > -1) h = h.substr(0, h.length - 3);else if (h.indexOf("rad") > -1) h = Math.round(h.substr(0, h.length - 3) * (180 / Math.PI));else if (h.indexOf("turn") > -1) h = Math.round(h.substr(0, h.length - 4) * 360); if (h >= 360) h %= 360; return { hue: h, saturation: s, lightness: l, alpha: a }; }; /** * Convert H(Hue), S(Saturation), L(Lightness), A (Alpha) colors RGB value also String output * @author AS Developers 2021 MIT License * @params H(Hue), S(Saturation), L(Lightness) as numbers, newSyntax( true / false) * @returns output rgb color string based on newSyntax */ exports.stringToHSLA = stringToHSLA; var HSLAToRGBA = function HSLAToRGBA(h, s, l, a) { var newSyntax = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false; var rgbObj = HSLToRGB(h, s, l, true); var r = rgbObj.r, g = rgbObj.g, b = rgbObj.b; if (newSyntax) { return "rgb(" + r + " " + g + " " + b + " / " + a * 100 + "%)"; } return "rgba(" + r + ", " + g + ", " + b + ", " + a + ")"; }; /** * Convert RGB colors string into HEX string * @author AS Developers 2021 MIT License * @params rgb as string * @returns output HEX string */ exports.HSLAToRGBA = HSLAToRGBA; var rgbToHEX = function rgbToHEX(rgb) { // Choose correct separator var sep = rgb.indexOf(",") > -1 ? "," : " "; // Turn "rgb(r,g,b)" into [r,g,b] rgb = rgb.substr(4).split(")")[0].split(sep); var r = (+rgb[0]).toString(16), g = (+rgb[1]).toString(16), b = (+rgb[2]).toString(16); if (r.length == 1) r = "0" + r; if (g.length == 1) g = "0" + g; if (b.length == 1) b = "0" + b; return "#" + r + g + b; }; /** * Convert RGBA colors string into HEX(A) string * @author AS Developers 2021 MIT License * @params rgba as string * @returns output HEX(A) string */ exports.rgbToHEX = rgbToHEX; var rgbaToHEXA = function rgbaToHEXA(rgba) { var sep = rgba.indexOf(",") > -1 ? "," : " "; rgba = rgba.substr(5).split(")")[0].split(sep); // Strip the slash if using space-separated syntax if (rgba.indexOf("/") > -1) rgba.splice(3, 1); for (var R in rgba) { var _r3 = rgba[R]; if (_r3.indexOf("%") > -1) { var p = _r3.substr(0, _r3.length - 1) / 100; if (R < 3) { rgba[R] = Math.round(p * 255); } else { rgba[R] = p; } } } var r = (+rgba[0]).toString(16), g = (+rgba[1]).toString(16), b = (+rgba[2]).toString(16), a = Math.round(+rgba[3] * 255).toString(16); if (r.length == 1) r = "0" + r; if (g.length == 1) g = "0" + g; if (b.length == 1) b = "0" + b; if (a.length == 1) a = "0" + a; return "#" + r + g + b + a; }; /** * Convert HSL colors string into HEX string * @author AS Developers 2021 MIT License * @params hsl as string * @returns output HEX string */ exports.rgbaToHEXA = rgbaToHEXA; var HSLToHEX = function HSLToHEX(hsl) { var sep = hsl.indexOf(",") > -1 ? "," : " "; hsl = hsl.substr(4).split(")")[0].split(sep); var h = hsl[0], s = hsl[1].substr(0, hsl[1].length - 1) / 100, l = hsl[2].substr(0, hsl[2].length - 1) / 100; // Strip label and convert to degrees (if necessary) if (h.indexOf("deg") > -1) h = h.substr(0, h.length - 3);else if (h.indexOf("rad") > -1) h = Math.round(h.substr(0, h.length - 3) * (180 / Math.PI));else if (h.indexOf("turn") > -1) h = Math.round(h.substr(0, h.length - 4) * 360); if (h >= 360) h %= 360; var c = (1 - Math.abs(2 * l - 1)) * s, x = c * (1 - Math.abs(h / 60 % 2 - 1)), m = l - c / 2, r = 0, g = 0, b = 0; if (0 <= h && h < 60) { r = c; g = x; b = 0; } else if (60 <= h && h < 120) { r = x; g = c; b = 0; } else if (120 <= h && h < 180) { r = 0; g = c; b = x; } else if (180 <= h && h < 240) { r = 0; g = x; b = c; } else if (240 <= h && h < 300) { r = x; g = 0; b = c; } else if (300 <= h && h < 360) { r = c; g = 0; b = x; } // Having obtained RGB, convert channels to hex r = Math.round((r + m) * 255).toString(16); g = Math.round((g + m) * 255).toString(16); b = Math.round((b + m) * 255).toString(16); // Prepend 0s, if necessary if (r.length == 1) r = "0" + r; if (g.length == 1) g = "0" + g; if (b.length == 1) b = "0" + b; return "#" + r + g + b; }; /** * Convert HSLA colors string into HEX(A) string * @author AS Developers 2021 MIT License * @params hsla as string * @returns output HEX(A) string */ exports.HSLToHEX = HSLToHEX; var HSLAToHEXA = function HSLAToHEXA(hsla) { var sep = hsla.indexOf(",") > -1 ? "," : " "; hsla = hsla.substr(5).split(")")[0].split(sep); // Strip the slash if (hsla.indexOf("/") > -1) hsla.splice(3, 1); var h = hsla[0], s = hsla[1].substr(0, hsla[1].length - 1) / 100, l = hsla[2].substr(0, hsla[2].length - 1) / 100, a = hsla[3]; // Strip label and convert to degrees (if necessary) if (h.indexOf("deg") > -1) h = h.substr(0, h.length - 3);else if (h.indexOf("rad") > -1) h = Math.round(h.substr(0, h.length - 3) * (180 / Math.PI));else if (h.indexOf("turn") > -1) h = Math.round(h.substr(0, h.length - 4) * 360); if (h >= 360) h %= 360; var c = (1 - Math.abs(2 * l - 1)) * s, x = c * (1 - Math.abs(h / 60 % 2 - 1)), m = l - c / 2, r = 0, g = 0, b = 0; if (0 <= h && h < 60) { r = c; g = x; b = 0; } else if (60 <= h && h < 120) { r = x; g = c; b = 0; } else if (120 <= h && h < 180) { r = 0; g = c; b = x; } else if (180 <= h && h < 240) { r = 0; g = x; b = c; } else if (240 <= h && h < 300) { r = x; g = 0; b = c; } else if (300 <= h && h < 360) { r = c; g = 0; b = x; } // Having obtained RGB, convert channels to hex r = Math.round((r + m) * 255).toString(16); g = Math.round((g + m) * 255).toString(16); b = Math.round((b + m) * 255).toString(16); a = Math.round(a * 255).toString(16); // Prepend 0s, if necessary if (r.length == 1) r = "0" + r; if (g.length == 1) g = "0" + g; if (b.length == 1) b = "0" + b; if (a.length == 1) a = "0" + a; return "#" + r + g + b + a; }; exports.HSLAToHEXA = HSLAToHEXA;