projex-ui-dev
Version:
Projex' user interface
1,663 lines (1,625 loc) • 979 kB
JavaScript
import * as React from 'react';
import React__default, { createContext, useContext, useEffect, useState, useRef, useMemo as useMemo$1, useLayoutEffect as useLayoutEffect$1, useCallback, forwardRef, useImperativeHandle } from 'react';
import Link from 'next/link.js';
import ReactDOM, { createPortal, unstable_batchedUpdates, flushSync } from 'react-dom';
import { useRouter } from 'next/router.js';
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol */
var __assign = function () {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest$h(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
}
function __spreadArray(to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
}
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
function styleInject(css, ref) {
if (ref === void 0) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') {
return;
}
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z$o = "/**************************************************************\n********************* GENERAL *********************\n***************************************************************/\n/**************************************************************\n********************* COLORS *********************\n***************************************************************/\n.Button-module_button__y6Gwz {\n padding: 0.75rem 2rem;\n font-weight: 700;\n font-size: 1rem;\n text-align: center;\n background-color: #002559;\n border: 1px solid #002559;\n color: white;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 0.625rem;\n transition: 0.3s;\n}\n.Button-module_button__y6Gwz:hover:not(:disabled) {\n cursor: pointer;\n background-color: white;\n color: #002559;\n}\n.Button-module_button__y6Gwz.Button-module_secondary__pP3kM {\n background-color: #ffffff;\n color: #002559;\n}\n.Button-module_button__y6Gwz.Button-module_secondary__pP3kM:hover:not(:disabled) {\n background-color: #002559;\n color: white;\n}\n.Button-module_button__y6Gwz.Button-module_warning__jKxPU {\n background-color: #F4971F;\n border: 1px solid #F4971F;\n color: #ffffff;\n}\n.Button-module_button__y6Gwz.Button-module_warning__jKxPU:hover:not(:disabled) {\n background-color: #ffffff;\n color: #F4971F;\n}\n.Button-module_button__y6Gwz.Button-module_alert__uxAyk {\n background-color: #B8181E;\n border: 1px solid #B8181E;\n color: #ffffff;\n}\n.Button-module_button__y6Gwz.Button-module_alert__uxAyk:hover:not(:disabled) {\n background-color: #ffffff;\n color: #B8181E;\n}\n.Button-module_button__y6Gwz.Button-module_text__Dyuvh {\n background-color: transparent;\n border: 1px solid transparent;\n color: #333333;\n font-weight: 400;\n}\n.Button-module_button__y6Gwz.Button-module_text__Dyuvh:hover:not(:disabled) {\n color: #999999;\n}\n.Button-module_button__y6Gwz.Button-module_text_gray__xKaV2 {\n background-color: transparent;\n border: 1px solid transparent;\n font-weight: 400;\n color: #999999;\n}\n.Button-module_button__y6Gwz.Button-module_textAlert__QsYSY {\n background-color: transparent;\n border: 1px solid transparent;\n color: #B8181E;\n font-weight: 400;\n}\n.Button-module_button__y6Gwz.Button-module_textAlert__QsYSY:hover:not(:disabled) {\n color: #999999;\n}\n.Button-module_button__y6Gwz.Button-module_block__nXEX2 {\n width: 100%;\n}\n.Button-module_button__y6Gwz.Button-module_right__qMoJW {\n flex-direction: row-reverse;\n}\n.Button-module_button__y6Gwz.Button-module_small__utRIp {\n padding: 0.5rem 1rem;\n}\n.Button-module_button__y6Gwz:disabled, .Button-module_button__y6Gwz.Button-module_loading__7LCMc {\n opacity: 30%;\n cursor: not-allowed;\n}\n.Button-module_button__y6Gwz.Button-module_loading__7LCMc:hover {\n cursor: wait;\n}";
var styles$o = {"button":"Button-module_button__y6Gwz","secondary":"Button-module_secondary__pP3kM","warning":"Button-module_warning__jKxPU","alert":"Button-module_alert__uxAyk","text":"Button-module_text__Dyuvh","text_gray":"Button-module_text_gray__xKaV2","textAlert":"Button-module_textAlert__QsYSY","block":"Button-module_block__nXEX2","right":"Button-module_right__qMoJW","small":"Button-module_small__utRIp","loading":"Button-module_loading__7LCMc"};
styleInject(css_248z$o);
var IconContext$1 = /*#__PURE__*/createContext({});
var Context$3 = IconContext$1;
function _extends$1() {
_extends$1 = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends$1.apply(this, arguments);
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _typeof$1(o) {
"@babel/helpers - typeof";
return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof$1(o);
}
function _toPrimitive(input, hint) {
if (_typeof$1(input) !== "object" || input === null) return input;
var prim = input[Symbol.toPrimitive];
if (prim !== undefined) {
var res = prim.call(input, hint || "default");
if (_typeof$1(res) !== "object") return res;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return (hint === "string" ? String : Number)(input);
}
function _toPropertyKey(arg) {
var key = _toPrimitive(arg, "string");
return _typeof$1(key) === "symbol" ? key : String(key);
}
function _defineProperty$1(obj, key, value) {
key = _toPropertyKey(key);
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
function getDefaultExportFromCjs (x) {
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
}
var classnames = {exports: {}};
/*!
Copyright (c) 2018 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
(function (module) {
/* global define */
(function () {
var hasOwn = {}.hasOwnProperty;
function classNames() {
var classes = [];
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (!arg) continue;
var argType = typeof arg;
if (argType === 'string' || argType === 'number') {
classes.push(arg);
} else if (Array.isArray(arg)) {
if (arg.length) {
var inner = classNames.apply(null, arg);
if (inner) {
classes.push(inner);
}
}
} else if (argType === 'object') {
if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
classes.push(arg.toString());
continue;
}
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes.push(key);
}
}
}
}
return classes.join(' ');
}
if (module.exports) {
classNames.default = classNames;
module.exports = classNames;
} else {
window.classNames = classNames;
}
})();
} (classnames));
var classnamesExports = classnames.exports;
var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
/**
* Take input from [0, n] and return it as [0, 1]
* @hidden
*/
function bound01(n, max) {
if (isOnePointZero(n)) {
n = '100%';
}
var isPercent = isPercentage(n);
n = max === 360 ? n : Math.min(max, Math.max(0, parseFloat(n)));
// Automatically convert percentage into number
if (isPercent) {
n = parseInt(String(n * max), 10) / 100;
}
// Handle floating point rounding errors
if (Math.abs(n - max) < 0.000001) {
return 1;
}
// Convert into [0, 1] range if it isn't already
if (max === 360) {
// If n is a hue given in degrees,
// wrap around out-of-range values into [0, 360] range
// then convert into [0, 1].
n = (n < 0 ? n % max + max : n % max) / parseFloat(String(max));
} else {
// If n not a hue given in degrees
// Convert into [0, 1] range if it isn't already.
n = n % max / parseFloat(String(max));
}
return n;
}
/**
* Force a number between 0 and 1
* @hidden
*/
function clamp01(val) {
return Math.min(1, Math.max(0, val));
}
/**
* Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
* <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
* @hidden
*/
function isOnePointZero(n) {
return typeof n === 'string' && n.indexOf('.') !== -1 && parseFloat(n) === 1;
}
/**
* Check to see if string passed in is a percentage
* @hidden
*/
function isPercentage(n) {
return typeof n === 'string' && n.indexOf('%') !== -1;
}
/**
* Return a valid alpha value [0,1] with all invalid values being set to 1
* @hidden
*/
function boundAlpha(a) {
a = parseFloat(a);
if (isNaN(a) || a < 0 || a > 1) {
a = 1;
}
return a;
}
/**
* Replace a decimal with it's percentage value
* @hidden
*/
function convertToPercentage(n) {
if (n <= 1) {
return "".concat(Number(n) * 100, "%");
}
return n;
}
/**
* Force a hex value to have 2 characters
* @hidden
*/
function pad2(c) {
return c.length === 1 ? '0' + c : String(c);
}
// `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from:
// <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>
/**
* Handle bounds / percentage checking to conform to CSS color spec
* <http://www.w3.org/TR/css3-color/>
* *Assumes:* r, g, b in [0, 255] or [0, 1]
* *Returns:* { r, g, b } in [0, 255]
*/
function rgbToRgb(r, g, b) {
return {
r: bound01(r, 255) * 255,
g: bound01(g, 255) * 255,
b: bound01(b, 255) * 255
};
}
/**
* Converts an RGB color value to HSL.
* *Assumes:* r, g, and b are contained in [0, 255] or [0, 1]
* *Returns:* { h, s, l } in [0,1]
*/
function rgbToHsl(r, g, b) {
r = bound01(r, 255);
g = bound01(g, 255);
b = bound01(b, 255);
var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
var h = 0;
var s = 0;
var l = (max + min) / 2;
if (max === min) {
s = 0;
h = 0; // achromatic
} else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h /= 6;
}
return {
h: h,
s: s,
l: l
};
}
function hue2rgb(p, q, t) {
if (t < 0) {
t += 1;
}
if (t > 1) {
t -= 1;
}
if (t < 1 / 6) {
return p + (q - p) * (6 * t);
}
if (t < 1 / 2) {
return q;
}
if (t < 2 / 3) {
return p + (q - p) * (2 / 3 - t) * 6;
}
return p;
}
/**
* Converts an HSL color value to RGB.
*
* *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]
* *Returns:* { r, g, b } in the set [0, 255]
*/
function hslToRgb(h, s, l) {
var r;
var g;
var b;
h = bound01(h, 360);
s = bound01(s, 100);
l = bound01(l, 100);
if (s === 0) {
// achromatic
g = l;
b = l;
r = l;
} else {
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1 / 3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1 / 3);
}
return {
r: r * 255,
g: g * 255,
b: b * 255
};
}
/**
* Converts an RGB color value to HSV
*
* *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
* *Returns:* { h, s, v } in [0,1]
*/
function rgbToHsv(r, g, b) {
r = bound01(r, 255);
g = bound01(g, 255);
b = bound01(b, 255);
var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
var h = 0;
var v = max;
var d = max - min;
var s = max === 0 ? 0 : d / max;
if (max === min) {
h = 0; // achromatic
} else {
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h /= 6;
}
return {
h: h,
s: s,
v: v
};
}
/**
* Converts an HSV color value to RGB.
*
* *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
* *Returns:* { r, g, b } in the set [0, 255]
*/
function hsvToRgb(h, s, v) {
h = bound01(h, 360) * 6;
s = bound01(s, 100);
v = bound01(v, 100);
var i = Math.floor(h);
var f = h - i;
var p = v * (1 - s);
var q = v * (1 - f * s);
var t = v * (1 - (1 - f) * s);
var mod = i % 6;
var r = [v, q, p, p, t, v][mod];
var g = [t, v, v, q, p, p][mod];
var b = [p, p, t, v, v, q][mod];
return {
r: r * 255,
g: g * 255,
b: b * 255
};
}
/**
* Converts an RGB color to hex
*
* Assumes r, g, and b are contained in the set [0, 255]
* Returns a 3 or 6 character hex
*/
function rgbToHex(r, g, b, allow3Char) {
var hex = [pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16))];
// Return a 3 character hex if possible
if (allow3Char && hex[0].startsWith(hex[0].charAt(1)) && hex[1].startsWith(hex[1].charAt(1)) && hex[2].startsWith(hex[2].charAt(1))) {
return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
}
return hex.join('');
}
/**
* Converts an RGBA color plus alpha transparency to hex
*
* Assumes r, g, b are contained in the set [0, 255] and
* a in [0, 1]. Returns a 4 or 8 character rgba hex
*/
// eslint-disable-next-line max-params
function rgbaToHex(r, g, b, a, allow4Char) {
var hex = [pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16)), pad2(convertDecimalToHex(a))];
// Return a 4 character hex if possible
if (allow4Char && hex[0].startsWith(hex[0].charAt(1)) && hex[1].startsWith(hex[1].charAt(1)) && hex[2].startsWith(hex[2].charAt(1)) && hex[3].startsWith(hex[3].charAt(1))) {
return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
}
return hex.join('');
}
/** Converts a decimal to a hex value */
function convertDecimalToHex(d) {
return Math.round(parseFloat(d) * 255).toString(16);
}
/** Converts a hex value to a decimal */
function convertHexToDecimal(h) {
return parseIntFromHex(h) / 255;
}
/** Parse a base-16 hex value into a base-10 integer */
function parseIntFromHex(val) {
return parseInt(val, 16);
}
function numberInputToObject(color) {
return {
r: color >> 16,
g: (color & 0xff00) >> 8,
b: color & 0xff
};
}
// https://github.com/bahamas10/css-color-names/blob/master/css-color-names.json
/**
* @hidden
*/
var names = {
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',
darkgrey: '#a9a9a9',
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',
goldenrod: '#daa520',
gold: '#ffd700',
gray: '#808080',
green: '#008000',
greenyellow: '#adff2f',
grey: '#808080',
honeydew: '#f0fff0',
hotpink: '#ff69b4',
indianred: '#cd5c5c',
indigo: '#4b0082',
ivory: '#fffff0',
khaki: '#f0e68c',
lavenderblush: '#fff0f5',
lavender: '#e6e6fa',
lawngreen: '#7cfc00',
lemonchiffon: '#fffacd',
lightblue: '#add8e6',
lightcoral: '#f08080',
lightcyan: '#e0ffff',
lightgoldenrodyellow: '#fafad2',
lightgray: '#d3d3d3',
lightgreen: '#90ee90',
lightgrey: '#d3d3d3',
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',
rebeccapurple: '#663399',
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'
};
/* eslint-disable @typescript-eslint/no-redundant-type-constituents */
/**
* Given a string or object, convert that input to RGB
*
* Possible string inputs:
* ```
* "red"
* "#f00" or "f00"
* "#ff0000" or "ff0000"
* "#ff000000" or "ff000000"
* "rgb 255 0 0" or "rgb (255, 0, 0)"
* "rgb 1.0 0 0" or "rgb (1, 0, 0)"
* "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
* "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
* "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
* "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
* "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
* ```
*/
function inputToRGB(color) {
var rgb = {
r: 0,
g: 0,
b: 0
};
var a = 1;
var s = null;
var v = null;
var l = null;
var ok = false;
var format = false;
if (typeof color === 'string') {
color = stringInputToObject(color);
}
if (typeof color === 'object') {
if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
rgb = rgbToRgb(color.r, color.g, color.b);
ok = true;
format = String(color.r).substr(-1) === '%' ? 'prgb' : 'rgb';
} else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
s = convertToPercentage(color.s);
v = convertToPercentage(color.v);
rgb = hsvToRgb(color.h, s, v);
ok = true;
format = 'hsv';
} else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
s = convertToPercentage(color.s);
l = convertToPercentage(color.l);
rgb = hslToRgb(color.h, s, l);
ok = true;
format = 'hsl';
}
if (Object.prototype.hasOwnProperty.call(color, 'a')) {
a = color.a;
}
}
a = boundAlpha(a);
return {
ok: ok,
format: color.format || format,
r: Math.min(255, Math.max(rgb.r, 0)),
g: Math.min(255, Math.max(rgb.g, 0)),
b: Math.min(255, Math.max(rgb.b, 0)),
a: a
};
}
// <http://www.w3.org/TR/css3-values/#integers>
var CSS_INTEGER = '[-\\+]?\\d+%?';
// <http://www.w3.org/TR/css3-values/#number-value>
var CSS_NUMBER = '[-\\+]?\\d*\\.\\d+%?';
// Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome.
var CSS_UNIT = "(?:".concat(CSS_NUMBER, ")|(?:").concat(CSS_INTEGER, ")");
// Actual matching.
// Parentheses and commas are optional, but not required.
// Whitespace can take the place of commas or opening paren
var PERMISSIVE_MATCH3 = "[\\s|\\(]+(".concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")\\s*\\)?");
var PERMISSIVE_MATCH4 = "[\\s|\\(]+(".concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")\\s*\\)?");
var matchers = {
CSS_UNIT: new RegExp(CSS_UNIT),
rgb: new RegExp('rgb' + PERMISSIVE_MATCH3),
rgba: new RegExp('rgba' + PERMISSIVE_MATCH4),
hsl: new RegExp('hsl' + PERMISSIVE_MATCH3),
hsla: new RegExp('hsla' + PERMISSIVE_MATCH4),
hsv: new RegExp('hsv' + PERMISSIVE_MATCH3),
hsva: new RegExp('hsva' + PERMISSIVE_MATCH4),
hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
};
/**
* Permissive string parsing. Take in a number of formats, and output an object
* based on detected format. Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}`
*/
function stringInputToObject(color) {
color = color.trim().toLowerCase();
if (color.length === 0) {
return false;
}
var named = false;
if (names[color]) {
color = names[color];
named = true;
} else if (color === 'transparent') {
return {
r: 0,
g: 0,
b: 0,
a: 0,
format: 'name'
};
}
// Try to match string input using regular expressions.
// Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]
// Just return an object and let the conversion functions handle that.
// This way the result will be the same whether the tinycolor is initialized with string or object.
var match = matchers.rgb.exec(color);
if (match) {
return {
r: match[1],
g: match[2],
b: match[3]
};
}
match = matchers.rgba.exec(color);
if (match) {
return {
r: match[1],
g: match[2],
b: match[3],
a: match[4]
};
}
match = matchers.hsl.exec(color);
if (match) {
return {
h: match[1],
s: match[2],
l: match[3]
};
}
match = matchers.hsla.exec(color);
if (match) {
return {
h: match[1],
s: match[2],
l: match[3],
a: match[4]
};
}
match = matchers.hsv.exec(color);
if (match) {
return {
h: match[1],
s: match[2],
v: match[3]
};
}
match = matchers.hsva.exec(color);
if (match) {
return {
h: match[1],
s: match[2],
v: match[3],
a: match[4]
};
}
match = matchers.hex8.exec(color);
if (match) {
return {
r: parseIntFromHex(match[1]),
g: parseIntFromHex(match[2]),
b: parseIntFromHex(match[3]),
a: convertHexToDecimal(match[4]),
format: named ? 'name' : 'hex8'
};
}
match = matchers.hex6.exec(color);
if (match) {
return {
r: parseIntFromHex(match[1]),
g: parseIntFromHex(match[2]),
b: parseIntFromHex(match[3]),
format: named ? 'name' : 'hex'
};
}
match = matchers.hex4.exec(color);
if (match) {
return {
r: parseIntFromHex(match[1] + match[1]),
g: parseIntFromHex(match[2] + match[2]),
b: parseIntFromHex(match[3] + match[3]),
a: convertHexToDecimal(match[4] + match[4]),
format: named ? 'name' : 'hex8'
};
}
match = matchers.hex3.exec(color);
if (match) {
return {
r: parseIntFromHex(match[1] + match[1]),
g: parseIntFromHex(match[2] + match[2]),
b: parseIntFromHex(match[3] + match[3]),
format: named ? 'name' : 'hex'
};
}
return false;
}
/**
* Check to see if it looks like a CSS unit
* (see `matchers` above for definition).
*/
function isValidCSSUnit(color) {
return Boolean(matchers.CSS_UNIT.exec(String(color)));
}
var TinyColor = /** @class */function () {
function TinyColor(color, opts) {
if (color === void 0) {
color = '';
}
if (opts === void 0) {
opts = {};
}
var _a;
// If input is already a tinycolor, return itself
if (color instanceof TinyColor) {
// eslint-disable-next-line no-constructor-return
return color;
}
if (typeof color === 'number') {
color = numberInputToObject(color);
}
this.originalInput = color;
var rgb = inputToRGB(color);
this.originalInput = color;
this.r = rgb.r;
this.g = rgb.g;
this.b = rgb.b;
this.a = rgb.a;
this.roundA = Math.round(100 * this.a) / 100;
this.format = (_a = opts.format) !== null && _a !== void 0 ? _a : rgb.format;
this.gradientType = opts.gradientType;
// Don't let the range of [0,255] come back in [0,1].
// Potentially lose a little bit of precision here, but will fix issues where
// .5 gets interpreted as half of the total, instead of half of 1
// If it was supposed to be 128, this was already taken care of by `inputToRgb`
if (this.r < 1) {
this.r = Math.round(this.r);
}
if (this.g < 1) {
this.g = Math.round(this.g);
}
if (this.b < 1) {
this.b = Math.round(this.b);
}
this.isValid = rgb.ok;
}
TinyColor.prototype.isDark = function () {
return this.getBrightness() < 128;
};
TinyColor.prototype.isLight = function () {
return !this.isDark();
};
/**
* Returns the perceived brightness of the color, from 0-255.
*/
TinyColor.prototype.getBrightness = function () {
// http://www.w3.org/TR/AERT#color-contrast
var rgb = this.toRgb();
return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
};
/**
* Returns the perceived luminance of a color, from 0-1.
*/
TinyColor.prototype.getLuminance = function () {
// http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
var rgb = this.toRgb();
var R;
var G;
var B;
var RsRGB = rgb.r / 255;
var GsRGB = rgb.g / 255;
var BsRGB = rgb.b / 255;
if (RsRGB <= 0.03928) {
R = RsRGB / 12.92;
} else {
// eslint-disable-next-line prefer-exponentiation-operator
R = Math.pow((RsRGB + 0.055) / 1.055, 2.4);
}
if (GsRGB <= 0.03928) {
G = GsRGB / 12.92;
} else {
// eslint-disable-next-line prefer-exponentiation-operator
G = Math.pow((GsRGB + 0.055) / 1.055, 2.4);
}
if (BsRGB <= 0.03928) {
B = BsRGB / 12.92;
} else {
// eslint-disable-next-line prefer-exponentiation-operator
B = Math.pow((BsRGB + 0.055) / 1.055, 2.4);
}
return 0.2126 * R + 0.7152 * G + 0.0722 * B;
};
/**
* Returns the alpha value of a color, from 0-1.
*/
TinyColor.prototype.getAlpha = function () {
return this.a;
};
/**
* Sets the alpha value on the current color.
*
* @param alpha - The new alpha value. The accepted range is 0-1.
*/
TinyColor.prototype.setAlpha = function (alpha) {
this.a = boundAlpha(alpha);
this.roundA = Math.round(100 * this.a) / 100;
return this;
};
/**
* Returns whether the color is monochrome.
*/
TinyColor.prototype.isMonochrome = function () {
var s = this.toHsl().s;
return s === 0;
};
/**
* Returns the object as a HSVA object.
*/
TinyColor.prototype.toHsv = function () {
var hsv = rgbToHsv(this.r, this.g, this.b);
return {
h: hsv.h * 360,
s: hsv.s,
v: hsv.v,
a: this.a
};
};
/**
* Returns the hsva values interpolated into a string with the following format:
* "hsva(xxx, xxx, xxx, xx)".
*/
TinyColor.prototype.toHsvString = function () {
var hsv = rgbToHsv(this.r, this.g, this.b);
var h = Math.round(hsv.h * 360);
var s = Math.round(hsv.s * 100);
var v = Math.round(hsv.v * 100);
return this.a === 1 ? "hsv(".concat(h, ", ").concat(s, "%, ").concat(v, "%)") : "hsva(".concat(h, ", ").concat(s, "%, ").concat(v, "%, ").concat(this.roundA, ")");
};
/**
* Returns the object as a HSLA object.
*/
TinyColor.prototype.toHsl = function () {
var hsl = rgbToHsl(this.r, this.g, this.b);
return {
h: hsl.h * 360,
s: hsl.s,
l: hsl.l,
a: this.a
};
};
/**
* Returns the hsla values interpolated into a string with the following format:
* "hsla(xxx, xxx, xxx, xx)".
*/
TinyColor.prototype.toHslString = function () {
var hsl = rgbToHsl(this.r, this.g, this.b);
var h = Math.round(hsl.h * 360);
var s = Math.round(hsl.s * 100);
var l = Math.round(hsl.l * 100);
return this.a === 1 ? "hsl(".concat(h, ", ").concat(s, "%, ").concat(l, "%)") : "hsla(".concat(h, ", ").concat(s, "%, ").concat(l, "%, ").concat(this.roundA, ")");
};
/**
* Returns the hex value of the color.
* @param allow3Char will shorten hex value to 3 char if possible
*/
TinyColor.prototype.toHex = function (allow3Char) {
if (allow3Char === void 0) {
allow3Char = false;
}
return rgbToHex(this.r, this.g, this.b, allow3Char);
};
/**
* Returns the hex value of the color -with a # prefixed.
* @param allow3Char will shorten hex value to 3 char if possible
*/
TinyColor.prototype.toHexString = function (allow3Char) {
if (allow3Char === void 0) {
allow3Char = false;
}
return '#' + this.toHex(allow3Char);
};
/**
* Returns the hex 8 value of the color.
* @param allow4Char will shorten hex value to 4 char if possible
*/
TinyColor.prototype.toHex8 = function (allow4Char) {
if (allow4Char === void 0) {
allow4Char = false;
}
return rgbaToHex(this.r, this.g, this.b, this.a, allow4Char);
};
/**
* Returns the hex 8 value of the color -with a # prefixed.
* @param allow4Char will shorten hex value to 4 char if possible
*/
TinyColor.prototype.toHex8String = function (allow4Char) {
if (allow4Char === void 0) {
allow4Char = false;
}
return '#' + this.toHex8(allow4Char);
};
/**
* Returns the shorter hex value of the color depends on its alpha -with a # prefixed.
* @param allowShortChar will shorten hex value to 3 or 4 char if possible
*/
TinyColor.prototype.toHexShortString = function (allowShortChar) {
if (allowShortChar === void 0) {
allowShortChar = false;
}
return this.a === 1 ? this.toHexString(allowShortChar) : this.toHex8String(allowShortChar);
};
/**
* Returns the object as a RGBA object.
*/
TinyColor.prototype.toRgb = function () {
return {
r: Math.round(this.r),
g: Math.round(this.g),
b: Math.round(this.b),
a: this.a
};
};
/**
* Returns the RGBA values interpolated into a string with the following format:
* "RGBA(xxx, xxx, xxx, xx)".
*/
TinyColor.prototype.toRgbString = function () {
var r = Math.round(this.r);
var g = Math.round(this.g);
var b = Math.round(this.b);
return this.a === 1 ? "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ")") : "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(this.roundA, ")");
};
/**
* Returns the object as a RGBA object.
*/
TinyColor.prototype.toPercentageRgb = function () {
var fmt = function (x) {
return "".concat(Math.round(bound01(x, 255) * 100), "%");
};
return {
r: fmt(this.r),
g: fmt(this.g),
b: fmt(this.b),
a: this.a
};
};
/**
* Returns the RGBA relative values interpolated into a string
*/
TinyColor.prototype.toPercentageRgbString = function () {
var rnd = function (x) {
return Math.round(bound01(x, 255) * 100);
};
return this.a === 1 ? "rgb(".concat(rnd(this.r), "%, ").concat(rnd(this.g), "%, ").concat(rnd(this.b), "%)") : "rgba(".concat(rnd(this.r), "%, ").concat(rnd(this.g), "%, ").concat(rnd(this.b), "%, ").concat(this.roundA, ")");
};
/**
* The 'real' name of the color -if there is one.
*/
TinyColor.prototype.toName = function () {
if (this.a === 0) {
return 'transparent';
}
if (this.a < 1) {
return false;
}
var hex = '#' + rgbToHex(this.r, this.g, this.b, false);
for (var _i = 0, _a = Object.entries(names); _i < _a.length; _i++) {
var _b = _a[_i],
key = _b[0],
value = _b[1];
if (hex === value) {
return key;
}
}
return false;
};
TinyColor.prototype.toString = function (format) {
var formatSet = Boolean(format);
format = format !== null && format !== void 0 ? format : this.format;
var formattedString = false;
var hasAlpha = this.a < 1 && this.a >= 0;
var needsAlphaFormat = !formatSet && hasAlpha && (format.startsWith('hex') || format === 'name');
if (needsAlphaFormat) {
// Special case for "transparent", all other non-alpha formats
// will return rgba when there is transparency.
if (format === 'name' && this.a === 0) {
return this.toName();
}
return this.toRgbString();
}
if (format === 'rgb') {
formattedString = this.toRgbString();
}
if (format === 'prgb') {
formattedString = this.toPercentageRgbString();
}
if (format === 'hex' || format === 'hex6') {
formattedString = this.toHexString();
}
if (format === 'hex3') {
formattedString = this.toHexString(true);
}
if (format === 'hex4') {
formattedString = this.toHex8String(true);
}
if (format === 'hex8') {
formattedString = this.toHex8String();
}
if (format === 'name') {
formattedString = this.toName();
}
if (format === 'hsl') {
formattedString = this.toHslString();
}
if (format === 'hsv') {
formattedString = this.toHsvString();
}
return formattedString || this.toHexString();
};
TinyColor.prototype.toNumber = function () {
return (Math.round(this.r) << 16) + (Math.round(this.g) << 8) + Math.round(this.b);
};
TinyColor.prototype.clone = function () {
return new TinyColor(this.toString());
};
/**
* Lighten the color a given amount. Providing 100 will always return white.
* @param amount - valid between 1-100
*/
TinyColor.prototype.lighten = function (amount) {
if (amount === void 0) {
amount = 10;
}
var hsl = this.toHsl();
hsl.l += amount / 100;
hsl.l = clamp01(hsl.l);
return new TinyColor(hsl);
};
/**
* Brighten the color a given amount, from 0 to 100.
* @param amount - valid between 1-100
*/
TinyColor.prototype.brighten = function (amount) {
if (amount === void 0) {
amount = 10;
}
var rgb = this.toRgb();
rgb.r = Math.max(0, Math.min(255, rgb.r - Math.round(255 * -(amount / 100))));
rgb.g = Math.max(0, Math.min(255, rgb.g - Math.round(255 * -(amount / 100))));
rgb.b = Math.max(0, Math.min(255, rgb.b - Math.round(255 * -(amount / 100))));
return new TinyColor(rgb);
};
/**
* Darken the color a given amount, from 0 to 100.
* Providing 100 will always return black.
* @param amount - valid between 1-100
*/
TinyColor.prototype.darken = function (amount) {
if (amount === void 0) {
amount = 10;
}
var hsl = this.toHsl();
hsl.l -= amount / 100;
hsl.l = clamp01(hsl.l);
return new TinyColor(hsl);
};
/**
* Mix the color with pure white, from 0 to 100.
* Providing 0 will do nothing, providing 100 will always return white.
* @param amount - valid between 1-100
*/
TinyColor.prototype.tint = function (amount) {
if (amount === void 0) {
amount = 10;
}
return this.mix('white', amount);
};
/**
* Mix the color with pure black, from 0 to 100.
* Providing 0 will do nothing, providing 100 will always return black.
* @param amount - valid between 1-100
*/
TinyColor.prototype.shade = function (amount) {
if (amount === void 0) {
amount = 10;
}
return this.mix('black', amount);
};
/**
* Desaturate the color a given amount, from 0 to 100.
* Providing 100 will is the same as calling greyscale
* @param amount - valid between 1-100
*/
TinyColor.prototype.desaturate = function (amount) {
if (amount === void 0) {
amount = 10;
}
var hsl = this.toHsl();
hsl.s -= amount / 100;
hsl.s = clamp01(hsl.s);
return new TinyColor(hsl);
};
/**
* Saturate the color a given amount, from 0 to 100.
* @param amount - valid between 1-100
*/
TinyColor.prototype.saturate = function (amount) {
if (amount === void 0) {
amount = 10;
}
var hsl = this.toHsl();
hsl.s += amount / 100;
hsl.s = clamp01(hsl.s);
return new TinyColor(hsl);
};
/**
* Completely desaturates a color into greyscale.
* Same as calling `desaturate(100)`
*/
TinyColor.prototype.greyscale = function () {
return this.desaturate(100);
};
/**
* Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
* Values outside of this range will be wrapped into this range.
*/
TinyColor.prototype.spin = function (amount) {
var hsl = this.toHsl();
var hue = (hsl.h + amount) % 360;
hsl.h = hue < 0 ? 360 + hue : hue;
return new TinyColor(hsl);
};
/**
* Mix the current color a given amount with another color, from 0 to 100.
* 0 means no mixing (return current color).
*/
TinyColor.prototype.mix = function (color, amount) {
if (amount === void 0) {
amount = 50;
}
var rgb1 = this.toRgb();
var rgb2 = new TinyColor(color).toRgb();
var p = amount / 100;
var rgba = {
r: (rgb2.r - rgb1.r) * p + rgb1.r,
g: (rgb2.g - rgb1.g) * p + rgb1.g,
b: (rgb2.b - rgb1.b) * p + rgb1.b,
a: (rgb2.a - rgb1.a) * p + rgb1.a
};
return new TinyColor(rgba);
};
TinyColor.prototype.analogous = function (results, slices) {
if (results === void 0) {
results = 6;
}
if (slices === void 0) {
slices = 30;
}
var hsl = this.toHsl();
var part = 360 / slices;
var ret = [this];
for (hsl.h = (hsl.h - (part * results >> 1) + 720) % 360; --results;) {
hsl.h = (hsl.h + part) % 360;
ret.push(new TinyColor(hsl));
}
return ret;
};
/**
* taken from https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js
*/
TinyColor.prototype.complement = function () {
var hsl = this.toHsl();
hsl.h = (hsl.h + 180) % 360;
return new TinyColor(hsl);
};
TinyColor.prototype.monochromatic = function (results) {
if (results === void 0) {
results = 6;
}
var hsv = this.toHsv();
var h = hsv.h;
var s = hsv.s;
var v = hsv.v;
var res = [];
var modification = 1 / results;
while (results--) {
res.push(new TinyColor({
h: h,
s: s,
v: v
}));
v = (v + modification) % 1;
}
return res;
};
TinyColor.prototype.splitcomplement = function () {
var hsl = this.toHsl();
var h = hsl.h;
return [this, new TinyColor({
h: (h + 72) % 360,
s: hsl.s,
l: hsl.l
}), new TinyColor({
h: (h + 216) % 360,
s: hsl.s,
l: hsl.l
})];
};
/**
* Compute how the color would appear on a background
*/
TinyColor.prototype.onBackground = function (background) {
var fg = this.toRgb();
var bg = new TinyColor(background).toRgb();
var alpha = fg.a + bg.a * (1 - fg.a);
return new TinyColor({
r: (fg.r * fg.a + bg.r * bg.a * (1 - fg.a)) / alpha,
g: (fg.g * fg.a + bg.g * bg.a * (1 - fg.a)) / alpha,
b: (fg.b * fg.a + bg.b * bg.a * (1 - fg.a)) / alpha,
a: alpha
});
};
/**
* Alias for `polyad(3)`
*/
TinyColor.prototype.triad = function () {
return this.polyad(3);
};
/**
* Alias for `polyad(4)`
*/
TinyColor.prototype.tetrad = function () {
return this.polyad(4);
};
/**
* Get polyad colors, like (for 1, 2, 3, 4, 5, 6, 7, 8, etc...)
* monad, dyad, triad, tetrad, pentad, hexad, heptad, octad, etc...
*/
TinyColor.prototype.polyad = function (n) {
var hsl = this.toHsl();
var h = hsl.h;
var result = [this];
var increment = 360 / n;
for (var i = 1; i < n; i++) {
result.push(new TinyColor({
h: (h + i * increment) % 360,
s: hsl.s,
l: hsl.l
}));
}
return result;
};
/**
* compare color vs current color
*/
TinyColor.prototype.equals = function (color) {
return this.toRgbString() === new TinyColor(color).toRgbString();
};
return TinyColor;
}();
var hueStep$1 = 2; // 色相阶梯
var saturationStep$1 = 0.16; // 饱和度阶梯，浅色部分
var saturationStep2$1 = 0.05; // 饱和度阶梯，深色部分
var brightnessStep1$1 = 0.05; // 亮度阶梯，浅色部分
var brightnessStep2$1 = 0.15; // 亮度阶梯，深色部分
var lightColorCount$1 = 5; // 浅色数量，主色上
var darkColorCount$1 = 4; // 深色数量，主色下
// 暗色主题颜色映射关系表
var darkColorMap$1 = [{
index: 7,
opacity: 0.15
}, {
index: 6,
opacity: 0.25
}, {
index: 5,
opacity: 0.3
}, {
index: 5,
opacity: 0.45
}, {
index: 5,
opacity: 0.65
}, {
index: 5,
opacity: 0.85
}, {
index: 4,
opacity: 0.9
}, {
index: 3,
opacity: 0.95
}, {
index: 2,
opacity: 0.97
}, {
index: 1,
opacity: 0.98
}];
// Wrapper function ported from TinyColor.prototype.toHsv
// Keep it here because of `hsv.h * 360`
function toHsv$1(_ref) {
var r = _ref.r,
g = _ref.g,
b = _ref.b;
var hsv = rgbToHsv(r, g, b);
return {
h: hsv.h * 360,
s: hsv.s,
v: hsv.v
};
}
// Wrapper function ported from TinyColor.prototype.toHexString
// Keep it here because of the prefix `#`
function toHex$1(_ref2) {
var r = _ref2.r,
g = _ref2.g,
b = _ref2.b;
return "#".concat(rgbToHex(r, g, b, false));
}
// Wrapper function ported from TinyColor.prototype.mix, not treeshakable.
// Amount in range [0, 1]
// Assume color1 & color2 has no alpha, since the following src code did so.
function mix$2(rgb1, rgb2, amount) {
var p = amount / 100;
var rgb = {
r: (rgb2.r - rgb1.r) * p + rgb1.r,
g: (rgb2.g - rgb1.g) * p + rgb1.g,
b: (rgb2.b - rgb1.b) * p + rgb1.b
};
return rgb;
}
function getHue$1(hsv, i, light) {
var hue;
// 根据色相不同，色相转向不同
if (Math.round(hsv.h) >= 60 && Math.round(hsv.h) <= 240) {
hue = light ? Math.round(hsv.h) - hueStep$1 * i : Math.round(hsv.h) + hueStep$1 * i;
} else {
hue = light ? Math.round(hsv.h) + hueStep$1 * i : Math.round(hsv.h) - hueStep$1 * i;
}
if (hue < 0) {
hue += 360;
} else if (hue >= 360) {
hue -= 360;
}
return hue;
}
function getSaturation$1(hsv, i, light) {
// grey color don't change saturation
if (hsv.h === 0 && hsv.s === 0) {
return hsv.s;
}
var saturation;
if (light) {
saturation = hsv.s - saturationStep$1 * i;
} else if (i === darkColorCount$1) {
saturation = hsv.s + saturationStep$1;
} else {
saturation = hsv.s + saturationStep2$1 * i;
}
// 边界值修正
if (saturation > 1) {
saturation = 1;
}
// 第一格的 s 限制在 0.06-0.1 之间
if (light && i === lightColorCount$1 && saturation > 0.1) {
saturation = 0.1;
}
if (saturation < 0.06) {
saturation = 0.06;
}
return Number(saturation.toFixed(2));
}
function getValue$3(hsv, i, light) {
var value;
if (light) {
value = hsv.v + brightnessStep1$1 * i;
} else {
value = hsv.v - brightnessStep2$1 * i;
}
if (value > 1) {
value = 1;
}
return Number(value.toFixed(2));
}
function generate$3(color) {
var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var patterns = [];
var pColor = inputToRGB(color);
for (var i = lightColorCount$1; i > 0; i -= 1) {
var hsv = toHsv$1(pColor);
var colorString = toHex$1(inputToRGB({
h: getHue$1(hsv, i, true),
s: getSaturation$1(hsv, i, true),
v: getValue$3(hsv, i, true)
}));
patterns.push(colorString);
}
patterns.push(toHex$1(pColor));
for (var _i = 1; _i <= darkColorCount$1; _i += 1) {
var _hsv = toHsv$1(pColor);
var _colorString = toHex$1(inputToRGB({
h: getHue$1(_hsv, _i),
s: getSaturation$1(_hsv, _i),
v: getValue$3(_hsv, _i)
}));
patterns.push(_colorString);
}
// dark theme pa