| 1 | function parseColor(color = "") {
|
| 2 | if (typeof color !== "string") {
|
| 3 | throw new TypeError("Color should be string!");
|
| 4 | }
|
| 5 | const hexMatch = /^#?([\da-f]{2})([\da-f]{2})([\da-f]{2})$/i.exec(color);
|
| 6 | if (hexMatch) {
|
| 7 | return hexMatch.splice(1).map((c) => Number.parseInt(c, 16));
|
| 8 | }
|
| 9 | const hexMatchShort = /^#?([\da-f])([\da-f])([\da-f])$/i.exec(color);
|
| 10 | if (hexMatchShort) {
|
| 11 | return hexMatchShort.splice(1).map((c) => Number.parseInt(c + c, 16));
|
| 12 | }
|
| 13 | if (color.includes(",")) {
|
| 14 | return color.split(",").map((p) => Number.parseInt(p));
|
| 15 | }
|
| 16 | throw new Error("Invalid color format! Use #ABC or #AABBCC or r,g,b");
|
| 17 | }
|
| 18 | function hexValue(components) {
|
| 19 | return "#" + components.map((c) => `0${c.toString(16).toUpperCase()}`.slice(-2)).join("");
|
| 20 | }
|
| 21 | function tint(components, intensity) {
|
| 22 | return components.map((c) => Math.round(c + (255 - c) * intensity));
|
| 23 | }
|
| 24 | function shade(components, intensity) {
|
| 25 | return components.map((c) => Math.round(c * intensity));
|
| 26 | }
|
| 27 | const withTint = (intensity) => (hex) => tint(hex, intensity);
|
| 28 | const withShade = (intensity) => (hex) => shade(hex, intensity);
|
| 29 |
|
| 30 | const _variants = {
|
| 31 | 50: withTint(0.95),
|
| 32 | 100: withTint(0.9),
|
| 33 | 200: withTint(0.75),
|
| 34 | 300: withTint(0.6),
|
| 35 | 400: withTint(0.3),
|
| 36 | 500: (c) => c,
|
| 37 | 600: withShade(0.9),
|
| 38 | 700: withShade(0.6),
|
| 39 | 800: withShade(0.45),
|
| 40 | 900: withShade(0.3),
|
| 41 | 950: withShade(0.2)
|
| 42 | };
|
| 43 | function getColors(color, variants = _variants) {
|
| 44 | const colors = {};
|
| 45 | const components = parseColor(color);
|
| 46 | for (const [name, fn] of Object.entries(variants)) {
|
| 47 | colors[name] = hexValue(fn(components));
|
| 48 | }
|
| 49 | return colors;
|
| 50 | }
|
| 51 |
|
| 52 | export { _variants, getColors };
|