81a1e580c9883055c7b3e2225e644be6aab9d00f655470d00bbe30fd087fbb3dcc0ac9ed9fe2fee0d66ffc5f70662e430799d777eff0360f83f6fb9ce9a46a 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. exports.tinycolor = exports.TinyColor = void 0;
  4. var conversion_js_1 = require("./conversion.js");
  5. var css_color_names_js_1 = require("./css-color-names.js");
  6. var format_input_1 = require("./format-input");
  7. var util_js_1 = require("./util.js");
  8. var TinyColor = /** @class */ (function () {
  9. function TinyColor(color, opts) {
  10. if (color === void 0) { color = ''; }
  11. if (opts === void 0) { opts = {}; }
  12. var _a;
  13. // If input is already a tinycolor, return itself
  14. if (color instanceof TinyColor) {
  15. // eslint-disable-next-line no-constructor-return
  16. return color;
  17. }
  18. if (typeof color === 'number') {
  19. color = (0, conversion_js_1.numberInputToObject)(color);
  20. }
  21. this.originalInput = color;
  22. var rgb = (0, format_input_1.inputToRGB)(color);
  23. this.originalInput = color;
  24. this.r = rgb.r;
  25. this.g = rgb.g;
  26. this.b = rgb.b;
  27. this.a = rgb.a;
  28. this.roundA = Math.round(100 * this.a) / 100;
  29. this.format = (_a = opts.format) !== null && _a !== void 0 ? _a : rgb.format;
  30. this.gradientType = opts.gradientType;
  31. // Don't let the range of [0,255] come back in [0,1].
  32. // Potentially lose a little bit of precision here, but will fix issues where
  33. // .5 gets interpreted as half of the total, instead of half of 1
  34. // If it was supposed to be 128, this was already taken care of by `inputToRgb`
  35. if (this.r < 1) {
  36. this.r = Math.round(this.r);
  37. }
  38. if (this.g < 1) {
  39. this.g = Math.round(this.g);
  40. }
  41. if (this.b < 1) {
  42. this.b = Math.round(this.b);
  43. }
  44. this.isValid = rgb.ok;
  45. }
  46. TinyColor.prototype.isDark = function () {
  47. return this.getBrightness() < 128;
  48. };
  49. TinyColor.prototype.isLight = function () {
  50. return !this.isDark();
  51. };
  52. /**
  53. * Returns the perceived brightness of the color, from 0-255.
  54. */
  55. TinyColor.prototype.getBrightness = function () {
  56. // http://www.w3.org/TR/AERT#color-contrast
  57. var rgb = this.toRgb();
  58. return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
  59. };
  60. /**
  61. * Returns the perceived luminance of a color, from 0-1.
  62. */
  63. TinyColor.prototype.getLuminance = function () {
  64. // http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
  65. var rgb = this.toRgb();
  66. var R;
  67. var G;
  68. var B;
  69. var RsRGB = rgb.r / 255;
  70. var GsRGB = rgb.g / 255;
  71. var BsRGB = rgb.b / 255;
  72. if (RsRGB <= 0.03928) {
  73. R = RsRGB / 12.92;
  74. }
  75. else {
  76. // eslint-disable-next-line prefer-exponentiation-operator
  77. R = Math.pow((RsRGB + 0.055) / 1.055, 2.4);
  78. }
  79. if (GsRGB <= 0.03928) {
  80. G = GsRGB / 12.92;
  81. }
  82. else {
  83. // eslint-disable-next-line prefer-exponentiation-operator
  84. G = Math.pow((GsRGB + 0.055) / 1.055, 2.4);
  85. }
  86. if (BsRGB <= 0.03928) {
  87. B = BsRGB / 12.92;
  88. }
  89. else {
  90. // eslint-disable-next-line prefer-exponentiation-operator
  91. B = Math.pow((BsRGB + 0.055) / 1.055, 2.4);
  92. }
  93. return 0.2126 * R + 0.7152 * G + 0.0722 * B;
  94. };
  95. /**
  96. * Returns the alpha value of a color, from 0-1.
  97. */
  98. TinyColor.prototype.getAlpha = function () {
  99. return this.a;
  100. };
  101. /**
  102. * Sets the alpha value on the current color.
  103. *
  104. * @param alpha - The new alpha value. The accepted range is 0-1.
  105. */
  106. TinyColor.prototype.setAlpha = function (alpha) {
  107. this.a = (0, util_js_1.boundAlpha)(alpha);
  108. this.roundA = Math.round(100 * this.a) / 100;
  109. return this;
  110. };
  111. /**
  112. * Returns whether the color is monochrome.
  113. */
  114. TinyColor.prototype.isMonochrome = function () {
  115. var s = this.toHsl().s;
  116. return s === 0;
  117. };
  118. /**
  119. * Returns the object as a HSVA object.
  120. */
  121. TinyColor.prototype.toHsv = function () {
  122. var hsv = (0, conversion_js_1.rgbToHsv)(this.r, this.g, this.b);
  123. return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this.a };
  124. };
  125. /**
  126. * Returns the hsva values interpolated into a string with the following format:
  127. * "hsva(xxx, xxx, xxx, xx)".
  128. */
  129. TinyColor.prototype.toHsvString = function () {
  130. var hsv = (0, conversion_js_1.rgbToHsv)(this.r, this.g, this.b);
  131. var h = Math.round(hsv.h * 360);
  132. var s = Math.round(hsv.s * 100);
  133. var v = Math.round(hsv.v * 100);
  134. return this.a === 1 ? "hsv(".concat(h, ", ").concat(s, "%, ").concat(v, "%)") : "hsva(".concat(h, ", ").concat(s, "%, ").concat(v, "%, ").concat(this.roundA, ")");
  135. };
  136. /**
  137. * Returns the object as a HSLA object.
  138. */
  139. TinyColor.prototype.toHsl = function () {
  140. var hsl = (0, conversion_js_1.rgbToHsl)(this.r, this.g, this.b);
  141. return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this.a };
  142. };
  143. /**
  144. * Returns the hsla values interpolated into a string with the following format:
  145. * "hsla(xxx, xxx, xxx, xx)".
  146. */
  147. TinyColor.prototype.toHslString = function () {
  148. var hsl = (0, conversion_js_1.rgbToHsl)(this.r, this.g, this.b);
  149. var h = Math.round(hsl.h * 360);
  150. var s = Math.round(hsl.s * 100);
  151. var l = Math.round(hsl.l * 100);
  152. return this.a === 1 ? "hsl(".concat(h, ", ").concat(s, "%, ").concat(l, "%)") : "hsla(".concat(h, ", ").concat(s, "%, ").concat(l, "%, ").concat(this.roundA, ")");
  153. };
  154. /**
  155. * Returns the hex value of the color.
  156. * @param allow3Char will shorten hex value to 3 char if possible
  157. */
  158. TinyColor.prototype.toHex = function (allow3Char) {
  159. if (allow3Char === void 0) { allow3Char = false; }
  160. return (0, conversion_js_1.rgbToHex)(this.r, this.g, this.b, allow3Char);
  161. };
  162. /**
  163. * Returns the hex value of the color -with a # prefixed.
  164. * @param allow3Char will shorten hex value to 3 char if possible
  165. */
  166. TinyColor.prototype.toHexString = function (allow3Char) {
  167. if (allow3Char === void 0) { allow3Char = false; }
  168. return '#' + this.toHex(allow3Char);
  169. };
  170. /**
  171. * Returns the hex 8 value of the color.
  172. * @param allow4Char will shorten hex value to 4 char if possible
  173. */
  174. TinyColor.prototype.toHex8 = function (allow4Char) {
  175. if (allow4Char === void 0) { allow4Char = false; }
  176. return (0, conversion_js_1.rgbaToHex)(this.r, this.g, this.b, this.a, allow4Char);
  177. };
  178. /**
  179. * Returns the hex 8 value of the color -with a # prefixed.
  180. * @param allow4Char will shorten hex value to 4 char if possible
  181. */
  182. TinyColor.prototype.toHex8String = function (allow4Char) {
  183. if (allow4Char === void 0) { allow4Char = false; }
  184. return '#' + this.toHex8(allow4Char);
  185. };
  186. /**
  187. * Returns the shorter hex value of the color depends on its alpha -with a # prefixed.
  188. * @param allowShortChar will shorten hex value to 3 or 4 char if possible
  189. */
  190. TinyColor.prototype.toHexShortString = function (allowShortChar) {
  191. if (allowShortChar === void 0) { allowShortChar = false; }
  192. return this.a === 1 ? this.toHexString(allowShortChar) : this.toHex8String(allowShortChar);
  193. };
  194. /**
  195. * Returns the object as a RGBA object.
  196. */
  197. TinyColor.prototype.toRgb = function () {
  198. return {
  199. r: Math.round(this.r),
  200. g: Math.round(this.g),
  201. b: Math.round(this.b),
  202. a: this.a,
  203. };
  204. };
  205. /**
  206. * Returns the RGBA values interpolated into a string with the following format:
  207. * "RGBA(xxx, xxx, xxx, xx)".
  208. */
  209. TinyColor.prototype.toRgbString = function () {
  210. var r = Math.round(this.r);
  211. var g = Math.round(this.g);
  212. var b = Math.round(this.b);
  213. return this.a === 1 ? "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ")") : "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(this.roundA, ")");
  214. };
  215. /**
  216. * Returns the object as a RGBA object.
  217. */
  218. TinyColor.prototype.toPercentageRgb = function () {
  219. var fmt = function (x) { return "".concat(Math.round((0, util_js_1.bound01)(x, 255) * 100), "%"); };
  220. return {
  221. r: fmt(this.r),
  222. g: fmt(this.g),
  223. b: fmt(this.b),
  224. a: this.a,
  225. };
  226. };
  227. /**
  228. * Returns the RGBA relative values interpolated into a string
  229. */
  230. TinyColor.prototype.toPercentageRgbString = function () {
  231. var rnd = function (x) { return Math.round((0, util_js_1.bound01)(x, 255) * 100); };
  232. return this.a === 1
  233. ? "rgb(".concat(rnd(this.r), "%, ").concat(rnd(this.g), "%, ").concat(rnd(this.b), "%)")
  234. : "rgba(".concat(rnd(this.r), "%, ").concat(rnd(this.g), "%, ").concat(rnd(this.b), "%, ").concat(this.roundA, ")");
  235. };
  236. /**
  237. * The 'real' name of the color -if there is one.
  238. */
  239. TinyColor.prototype.toName = function () {
  240. if (this.a === 0) {
  241. return 'transparent';
  242. }
  243. if (this.a < 1) {
  244. return false;
  245. }
  246. var hex = '#' + (0, conversion_js_1.rgbToHex)(this.r, this.g, this.b, false);
  247. for (var _i = 0, _a = Object.entries(css_color_names_js_1.names); _i < _a.length; _i++) {
  248. var _b = _a[_i], key = _b[0], value = _b[1];
  249. if (hex === value) {
  250. return key;
  251. }
  252. }
  253. return false;
  254. };
  255. TinyColor.prototype.toString = function (format) {
  256. var formatSet = Boolean(format);
  257. format = format !== null && format !== void 0 ? format : this.format;
  258. var formattedString = false;
  259. var hasAlpha = this.a < 1 && this.a >= 0;
  260. var needsAlphaFormat = !formatSet && hasAlpha && (format.startsWith('hex') || format === 'name');
  261. if (needsAlphaFormat) {
  262. // Special case for "transparent", all other non-alpha formats
  263. // will return rgba when there is transparency.
  264. if (format === 'name' && this.a === 0) {
  265. return this.toName();
  266. }
  267. return this.toRgbString();
  268. }
  269. if (format === 'rgb') {
  270. formattedString = this.toRgbString();
  271. }
  272. if (format === 'prgb') {
  273. formattedString = this.toPercentageRgbString();
  274. }
  275. if (format === 'hex' || format === 'hex6') {
  276. formattedString = this.toHexString();
  277. }
  278. if (format === 'hex3') {
  279. formattedString = this.toHexString(true);
  280. }
  281. if (format === 'hex4') {
  282. formattedString = this.toHex8String(true);
  283. }
  284. if (format === 'hex8') {
  285. formattedString = this.toHex8String();
  286. }
  287. if (format === 'name') {
  288. formattedString = this.toName();
  289. }
  290. if (format === 'hsl') {
  291. formattedString = this.toHslString();
  292. }
  293. if (format === 'hsv') {
  294. formattedString = this.toHsvString();
  295. }
  296. return formattedString || this.toHexString();
  297. };
  298. TinyColor.prototype.toNumber = function () {
  299. return (Math.round(this.r) << 16) + (Math.round(this.g) << 8) + Math.round(this.b);
  300. };
  301. TinyColor.prototype.clone = function () {
  302. return new TinyColor(this.toString());
  303. };
  304. /**
  305. * Lighten the color a given amount. Providing 100 will always return white.
  306. * @param amount - valid between 1-100
  307. */
  308. TinyColor.prototype.lighten = function (amount) {
  309. if (amount === void 0) { amount = 10; }
  310. var hsl = this.toHsl();
  311. hsl.l += amount / 100;
  312. hsl.l = (0, util_js_1.clamp01)(hsl.l);
  313. return new TinyColor(hsl);
  314. };
  315. /**
  316. * Brighten the color a given amount, from 0 to 100.
  317. * @param amount - valid between 1-100
  318. */
  319. TinyColor.prototype.brighten = function (amount) {
  320. if (amount === void 0) { amount = 10; }
  321. var rgb = this.toRgb();
  322. rgb.r = Math.max(0, Math.min(255, rgb.r - Math.round(255 * -(amount / 100))));
  323. rgb.g = Math.max(0, Math.min(255, rgb.g - Math.round(255 * -(amount / 100))));
  324. rgb.b = Math.max(0, Math.min(255, rgb.b - Math.round(255 * -(amount / 100))));
  325. return new TinyColor(rgb);
  326. };
  327. /**
  328. * Darken the color a given amount, from 0 to 100.
  329. * Providing 100 will always return black.
  330. * @param amount - valid between 1-100
  331. */
  332. TinyColor.prototype.darken = function (amount) {
  333. if (amount === void 0) { amount = 10; }
  334. var hsl = this.toHsl();
  335. hsl.l -= amount / 100;
  336. hsl.l = (0, util_js_1.clamp01)(hsl.l);
  337. return new TinyColor(hsl);
  338. };
  339. /**
  340. * Mix the color with pure white, from 0 to 100.
  341. * Providing 0 will do nothing, providing 100 will always return white.
  342. * @param amount - valid between 1-100
  343. */
  344. TinyColor.prototype.tint = function (amount) {
  345. if (amount === void 0) { amount = 10; }
  346. return this.mix('white', amount);
  347. };
  348. /**
  349. * Mix the color with pure black, from 0 to 100.
  350. * Providing 0 will do nothing, providing 100 will always return black.
  351. * @param amount - valid between 1-100
  352. */
  353. TinyColor.prototype.shade = function (amount) {
  354. if (amount === void 0) { amount = 10; }
  355. return this.mix('black', amount);
  356. };
  357. /**
  358. * Desaturate the color a given amount, from 0 to 100.
  359. * Providing 100 will is the same as calling greyscale
  360. * @param amount - valid between 1-100
  361. */
  362. TinyColor.prototype.desaturate = function (amount) {
  363. if (amount === void 0) { amount = 10; }
  364. var hsl = this.toHsl();
  365. hsl.s -= amount / 100;
  366. hsl.s = (0, util_js_1.clamp01)(hsl.s);
  367. return new TinyColor(hsl);
  368. };
  369. /**
  370. * Saturate the color a given amount, from 0 to 100.
  371. * @param amount - valid between 1-100
  372. */
  373. TinyColor.prototype.saturate = function (amount) {
  374. if (amount === void 0) { amount = 10; }
  375. var hsl = this.toHsl();
  376. hsl.s += amount / 100;
  377. hsl.s = (0, util_js_1.clamp01)(hsl.s);
  378. return new TinyColor(hsl);
  379. };
  380. /**
  381. * Completely desaturates a color into greyscale.
  382. * Same as calling `desaturate(100)`
  383. */
  384. TinyColor.prototype.greyscale = function () {
  385. return this.desaturate(100);
  386. };
  387. /**
  388. * Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
  389. * Values outside of this range will be wrapped into this range.
  390. */
  391. TinyColor.prototype.spin = function (amount) {
  392. var hsl = this.toHsl();
  393. var hue = (hsl.h + amount) % 360;
  394. hsl.h = hue < 0 ? 360 + hue : hue;
  395. return new TinyColor(hsl);
  396. };
  397. /**
  398. * Mix the current color a given amount with another color, from 0 to 100.
  399. * 0 means no mixing (return current color).
  400. */
  401. TinyColor.prototype.mix = function (color, amount) {
  402. if (amount === void 0) { amount = 50; }
  403. var rgb1 = this.toRgb();
  404. var rgb2 = new TinyColor(color).toRgb();
  405. var p = amount / 100;
  406. var rgba = {
  407. r: (rgb2.r - rgb1.r) * p + rgb1.r,
  408. g: (rgb2.g - rgb1.g) * p + rgb1.g,
  409. b: (rgb2.b - rgb1.b) * p + rgb1.b,
  410. a: (rgb2.a - rgb1.a) * p + rgb1.a,
  411. };
  412. return new TinyColor(rgba);
  413. };
  414. TinyColor.prototype.analogous = function (results, slices) {
  415. if (results === void 0) { results = 6; }
  416. if (slices === void 0) { slices = 30; }
  417. var hsl = this.toHsl();
  418. var part = 360 / slices;
  419. var ret = [this];
  420. for (hsl.h = (hsl.h - ((part * results) >> 1) + 720) % 360; --results;) {
  421. hsl.h = (hsl.h + part) % 360;
  422. ret.push(new TinyColor(hsl));
  423. }
  424. return ret;
  425. };
  426. /**
  427. * taken from https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js
  428. */
  429. TinyColor.prototype.complement = function () {
  430. var hsl = this.toHsl();
  431. hsl.h = (hsl.h + 180) % 360;
  432. return new TinyColor(hsl);
  433. };
  434. TinyColor.prototype.monochromatic = function (results) {
  435. if (results === void 0) { results = 6; }
  436. var hsv = this.toHsv();
  437. var h = hsv.h;
  438. var s = hsv.s;
  439. var v = hsv.v;
  440. var res = [];
  441. var modification = 1 / results;
  442. while (results--) {
  443. res.push(new TinyColor({ h: h, s: s, v: v }));
  444. v = (v + modification) % 1;
  445. }
  446. return res;
  447. };
  448. TinyColor.prototype.splitcomplement = function () {
  449. var hsl = this.toHsl();
  450. var h = hsl.h;
  451. return [
  452. this,
  453. new TinyColor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l }),
  454. new TinyColor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l }),
  455. ];
  456. };
  457. /**
  458. * Compute how the color would appear on a background
  459. */
  460. TinyColor.prototype.onBackground = function (background) {
  461. var fg = this.toRgb();
  462. var bg = new TinyColor(background).toRgb();
  463. var alpha = fg.a + bg.a * (1 - fg.a);
  464. return new TinyColor({
  465. r: (fg.r * fg.a + bg.r * bg.a * (1 - fg.a)) / alpha,
  466. g: (fg.g * fg.a + bg.g * bg.a * (1 - fg.a)) / alpha,
  467. b: (fg.b * fg.a + bg.b * bg.a * (1 - fg.a)) / alpha,
  468. a: alpha,
  469. });
  470. };
  471. /**
  472. * Alias for `polyad(3)`
  473. */
  474. TinyColor.prototype.triad = function () {
  475. return this.polyad(3);
  476. };
  477. /**
  478. * Alias for `polyad(4)`
  479. */
  480. TinyColor.prototype.tetrad = function () {
  481. return this.polyad(4);
  482. };
  483. /**
  484. * Get polyad colors, like (for 1, 2, 3, 4, 5, 6, 7, 8, etc...)
  485. * monad, dyad, triad, tetrad, pentad, hexad, heptad, octad, etc...
  486. */
  487. TinyColor.prototype.polyad = function (n) {
  488. var hsl = this.toHsl();
  489. var h = hsl.h;
  490. var result = [this];
  491. var increment = 360 / n;
  492. for (var i = 1; i < n; i++) {
  493. result.push(new TinyColor({ h: (h + i * increment) % 360, s: hsl.s, l: hsl.l }));
  494. }
  495. return result;
  496. };
  497. /**
  498. * compare color vs current color
  499. */
  500. TinyColor.prototype.equals = function (color) {
  501. return this.toRgbString() === new TinyColor(color).toRgbString();
  502. };
  503. return TinyColor;
  504. }());
  505. exports.TinyColor = TinyColor;
  506. // kept for backwards compatability with v1
  507. function tinycolor(color, opts) {
  508. if (color === void 0) { color = ''; }
  509. if (opts === void 0) { opts = {}; }
  510. return new TinyColor(color, opts);
  511. }
  512. exports.tinycolor = tinycolor;