@symbo.ls/scratch 2.10.149 → 2.10.156

package/dist/cjs/system/svg.js

@@ -0,0 +1,81 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var svg_exports = {};
+__export(svg_exports, {
+  appendIconsSprite: () => appendIconsSprite,
+  appendSVGSprite: () => appendSVGSprite,
+  setIcon: () => setIcon,
+  setSVG: () => setSVG
+});
+module.exports = __toCommonJS(svg_exports);
+var import_globals = require("@domql/globals");
+var import_utils = require("../utils");
+var import_factory = require("../factory.js");
+const DEF_OPTIONS = {
+  document: import_globals.document
+};
+const setSVG = (val, key) => {
+  if (!val) {
+    if (CONFIG.verbose)
+      console.warn("setSVG: val is not defined", key);
+    return;
+  }
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  if (CONFIG.useSvgSprite) {
+    return (0, import_utils.convertSvgToSymbol)(key, val);
+  }
+  return val;
+};
+const appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  const doc = options.document || import_globals.document;
+  const lib = Object.keys(LIBRARY).length ? {} : CONFIG.SVG;
+  for (let key in LIBRARY)
+    lib[key] = CONFIG.SVG[key];
+  const SVGsprite = (0, import_utils.generateSprite)(lib);
+  if (!doc) {
+    console.warn("To append SVG sprites it should be run in browser environment");
+    return SVGsprite;
+  }
+  const svgSpriteDOM = doc.createElement("template");
+  svgSpriteDOM.innerHTML = SVGsprite;
+  doc.body.appendChild(svgSpriteDOM.content);
+};
+const setIcon = (val, key) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  if (CONFIG.useIconSprite) {
+    return setSVG(val, key);
+  }
+  return val;
+};
+const appendIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  const doc = options.document || import_globals.document;
+  const lib = Object.keys(LIBRARY).length ? {} : CONFIG.ICONS;
+  for (let key in LIBRARY)
+    lib[key] = CONFIG.ICONS[key];
+  const SVGsprite = (0, import_utils.generateSprite)(lib);
+  if (!doc) {
+    console.warn("To append SVG Icon sprites it should be run in browser environment");
+    return SVGsprite;
+  }
+  const iconsSpriteDOM = doc.createElement("template");
+  iconsSpriteDOM.innerHTML = SVGsprite;
+  doc.body.appendChild(iconsSpriteDOM.content);
+};

package/dist/cjs/system/theme.js

@@ -0,0 +1,255 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var theme_exports = {};
+__export(theme_exports, {
+  getMediaTheme: () => getMediaTheme,
+  getTheme: () => getTheme,
+  setMediaTheme: () => setMediaTheme,
+  setTheme: () => setTheme
+});
+module.exports = __toCommonJS(theme_exports);
+var import_color = require("./color");
+var import_factory = require("../factory.js");
+var import_utils = require("@domql/utils");
+const ENV = "development";
+const setThemeValue = (theme) => {
+  const value = {};
+  const { state, media, helpers, ...rest } = theme;
+  const keys = Object.keys(rest);
+  keys.map((key) => {
+    const conditions = ["color", "Color", "background", "border"];
+    const isColor = conditions.some((k) => key.includes(k));
+    return value[key] = isColor ? (0, import_color.getColor)(theme[key]) : theme[key];
+  });
+  return value;
+};
+const getThemeValue = (theme) => {
+  if (theme.value)
+    return theme.value;
+  theme.value = setThemeValue(theme);
+  return theme.value;
+};
+const getTheme = (value, modifier) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  if (CONFIG.useVariable)
+    return getMediaTheme(value, modifier);
+  const { THEME } = CONFIG;
+  if ((0, import_utils.isString)(value)) {
+    const [theme, subtheme] = value.split(" ");
+    const isOurTheme = THEME[theme];
+    if (isOurTheme) {
+      if (!subtheme && !modifier)
+        return getThemeValue(isOurTheme);
+      value = [theme, subtheme || modifier];
+    }
+  }
+  if ((0, import_utils.isObjectLike)(value) && value[1]) {
+    const themeName = value[0];
+    const subThemeName = value[1];
+    const { helpers, media, state } = THEME[themeName];
+    if (media && media[subThemeName])
+      return getThemeValue(media[subThemeName]);
+    if (helpers && helpers[subThemeName])
+      return getThemeValue(helpers[subThemeName]);
+    if (state && state[subThemeName])
+      return getThemeValue(state[subThemeName]);
+  } else if ((0, import_utils.isObject)(value))
+    return setThemeValue(value);
+};
+const setInverseTheme = (theme, variant, value) => {
+  if ((0, import_utils.isObject)(variant)) {
+    theme.variants.inverse.value = setThemeValue(variant);
+  } else if (variant === true) {
+    const { color, background } = value;
+    theme.variants.inverse = {
+      value: {
+        color: background,
+        background: color
+      }
+    };
+  }
+};
+const setPseudo = (theme, key, variant, themeValue) => {
+  const result = getTheme(variant);
+  themeValue[`&:${key}`] = result;
+  if ((0, import_utils.isObject)(variant) && !variant.value)
+    variant.value = result;
+};
+const setSelectors = (theme, value) => {
+  const { state } = theme;
+  if (!state)
+    return;
+  const keys = Object.keys(state);
+  keys.map((key) => {
+    const variant = state[key];
+    setPseudo(theme, key, variant, value);
+    return theme;
+  });
+  return theme;
+};
+const setPrefersScheme = (theme, key, variant, themeValue) => {
+  const result = getTheme(variant);
+  themeValue[`@media (prefers-color-scheme: ${key})`] = result;
+  if ((0, import_utils.isObject)(variant) && !variant.value)
+    variant.value = result;
+};
+const setMedia = (theme, value) => {
+  const { media } = theme;
+  if (!media)
+    return;
+  const keys = Object.keys(media);
+  keys.map((key) => {
+    const variant = media[key];
+    if (key === "dark" || key === "light")
+      setPrefersScheme(theme, key, variant, value);
+    if (key === "inverse")
+      setInverseTheme(theme, variant, value);
+    return theme;
+  });
+  return theme;
+};
+const setHelpers = (theme, value) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  const { helpers } = theme;
+  if (!helpers)
+    return;
+  const keys = Object.keys(helpers);
+  keys.map((key) => {
+    const helper = helpers[key];
+    if ((0, import_utils.isString)(helper))
+      helpers[key] = CONFIG.THEME[helper];
+    else
+      getThemeValue(helpers[key]);
+    return theme;
+  });
+  return theme;
+};
+const setTheme = (val, key) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  if (CONFIG.useVariable)
+    return setMediaTheme(val, key);
+  const { state, media, helpers } = val;
+  const value = setThemeValue(val, key);
+  const CSSvar = `--theme-${key}`;
+  setSelectors(val, value);
+  setMedia(val, value);
+  setHelpers(val, value);
+  return { var: CSSvar, value, state, media, helpers };
+};
+const keySetters = {
+  // eslint-disable-line
+  "@": (theme, value) => setMedia(theme, value),
+  ":": (theme, value) => setSelectors(theme, value),
+  ".": (theme, value) => setHelpers(theme, value)
+};
+const setMediaTheme = (val, key, suffix, prefers) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  const { CSS_VARS } = CONFIG;
+  const theme = { value: val };
+  if ((0, import_utils.isObjectLike)(val)) {
+    for (const param in val) {
+      const symb = param.slice(0, 1);
+      const value = val[param];
+      if (symb === "@" || symb === ":" || symb === ".") {
+        const hasPrefers = symb === "@" && param;
+        theme[param] = setMediaTheme(value, key, param, prefers || hasPrefers);
+      } else {
+        const color = (0, import_color.getColor)(value, prefers);
+        const metaSuffixes = [...new Set([prefers, suffix].filter((v) => v).map((v) => v.slice(1)))];
+        const varmetaSuffixName = metaSuffixes.length ? "-" + metaSuffixes.join("-") : "";
+        const CSSVar = `--theme-${key}${varmetaSuffixName}-${param}`;
+        if (CONFIG.useVariable) {
+          CSS_VARS[CSSVar] = color;
+          theme[param] = `var(${CSSVar})`;
+        } else {
+          theme[param] = color;
+        }
+        theme[`.${param}`] = { [param]: theme[param] };
+      }
+    }
+    if (theme["background"] || theme["color"] || theme["backgroundColor"]) {
+      theme[".inversed"] = {
+        color: theme["background"] || theme["backgroundColor"],
+        background: theme["color"]
+      };
+    }
+  }
+  if ((0, import_utils.isString)(val) && val.slice(0, 2) === "--") {
+    const { THEME } = CONFIG;
+    const value = THEME[val.slice(2)];
+    const getReferenced = getMediaTheme(value, prefers);
+    return getReferenced;
+  }
+  return theme;
+};
+const recursiveTheme = (val) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  const obj = {};
+  for (const param in val) {
+    const symb = param.slice(0, 1);
+    if ((0, import_utils.isObjectLike)(val[param])) {
+      if (symb === "@") {
+        const query = CONFIG.MEDIA[param.slice(1)];
+        const media = `@media screen and ${query}`;
+        obj[media] = recursiveTheme(val[param]);
+      } else if (symb === ":") {
+        obj[`&${param}`] = recursiveTheme(val[param]);
+      }
+    } else
+      obj[param] = val[param];
+  }
+  return obj;
+};
+const findModifierFromArray = (val, modifierArray) => {
+  const currentMod = modifierArray.shift();
+  if (val[currentMod])
+    return findModifierFromArray(val[currentMod], modifierArray);
+  return val;
+};
+const findModifier = (val, modifier) => {
+  if ((0, import_utils.isArray)(modifier))
+    return findModifierFromArray(val, modifier);
+  else if ((0, import_utils.isString)(modifier) && val[modifier])
+    return val[modifier];
+  else
+    return val;
+};
+const checkForReference = (val, callback) => {
+  if ((0, import_utils.isString)(val) && val.slice(0, 2) === "--")
+    return getMediaTheme(val.slice(2));
+  return val;
+};
+const checkThemeReference = (val) => checkForReference(val, checkThemeReference);
+const getMediaTheme = (val, mod) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  if ((0, import_utils.isString)(val) && val.slice(0, 2) === "--")
+    val = getMediaTheme(val.slice(2));
+  if (!val || !(0, import_utils.isString)(val)) {
+    if (CONFIG.verbose)
+      console.warn(val, "- theme is not string");
+    return;
+  }
+  const [name, ...modifier] = (0, import_utils.isArray)(val) ? val : val.split(" ");
+  let value = CONFIG.THEME[name];
+  if (value && (modifier || mod)) {
+    value = findModifier(value, modifier.length ? modifier : mod);
+  }
+  const r = recursiveTheme(value);
+  return r;
+};

package/dist/cjs/system/timing.js

@@ -0,0 +1,48 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var timing_exports = {};
+__export(timing_exports, {
+  applyTimingSequence: () => applyTimingSequence,
+  getTimingByKey: () => getTimingByKey,
+  getTimingFunction: () => getTimingFunction
+});
+module.exports = __toCommonJS(timing_exports);
+var import_utils = require("@symbo.ls/utils");
+var import_factory = require("../factory.js");
+var import_utils2 = require("../utils");
+const applyTimingSequence = () => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  const { TIMING } = CONFIG;
+  (0, import_utils2.generateSequence)(TIMING);
+  (0, import_utils2.applySequenceVars)(TIMING);
+};
+const getTimingFunction = (value) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  const { TIMING } = CONFIG;
+  return TIMING[value] || TIMING[(0, import_utils.toCamelCase)(value)] || value;
+};
+const getTimingByKey = (value, property = "timing") => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  const { TIMING } = CONFIG;
+  return (0, import_utils2.getSequenceValuePropertyPair)(
+    value,
+    property,
+    TIMING
+  );
+};

package/dist/cjs/system/typography.js

@@ -0,0 +1,94 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var typography_exports = {};
+__export(typography_exports, {
+  applyHeadings: () => applyHeadings,
+  applyTypographySequence: () => applyTypographySequence,
+  getFontSizeByKey: () => getFontSizeByKey,
+  runThroughMedia: () => runThroughMedia
+});
+module.exports = __toCommonJS(typography_exports);
+var import_factory = require("../factory.js");
+var import_utils = require("../utils");
+const runThroughMedia = (props) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  const { TYPOGRAPHY, MEDIA } = CONFIG;
+  for (const prop in props) {
+    const mediaProps = props[prop];
+    if (prop.slice(0, 1) === "@") {
+      const { type, base, ratio, range, subSequence, h1Matches, unit } = props;
+      (0, import_utils.merge)(mediaProps, {
+        type,
+        base,
+        ratio,
+        range,
+        subSequence,
+        h1Matches,
+        unit,
+        sequence: {},
+        scales: {},
+        templates: {},
+        vars: {}
+      });
+      (0, import_utils.generateSequence)(mediaProps);
+      const mediaName = prop.slice(1);
+      (0, import_utils.applySequenceVars)(mediaProps, mediaName);
+      const query = MEDIA[mediaName];
+      TYPOGRAPHY.templates[`@media screen and ${query}`] = {
+        fontSize: mediaProps.base / TYPOGRAPHY.browserDefault + unit
+      };
+    }
+  }
+};
+const applyHeadings = (props) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  if (props.h1Matches) {
+    const unit = props.unit;
+    const HEADINGS = (0, import_utils.findHeadings)(props);
+    const { templates } = props;
+    for (const k in HEADINGS) {
+      const headerName = `h${parseInt(k) + 1}`;
+      const headerStyle = templates[headerName];
+      templates[headerName] = {
+        fontSize: CONFIG.useVariable ? `var(${HEADINGS[k].variable})` : `${HEADINGS[k].scaling}${unit}`,
+        margin: headerStyle ? headerStyle.margin : 0,
+        lineHeight: headerStyle ? headerStyle.lineHeight : props.lineHeight,
+        letterSpacing: headerStyle ? headerStyle.letterSpacing : props.letterSpacing,
+        fontWeight: headerStyle ? headerStyle.fontWeight : 900 - k * 100
+      };
+    }
+  }
+};
+const applyTypographySequence = () => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  const { TYPOGRAPHY } = CONFIG;
+  (0, import_utils.generateSequence)(TYPOGRAPHY);
+  applyHeadings(TYPOGRAPHY);
+  (0, import_utils.applySequenceVars)(TYPOGRAPHY);
+  runThroughMedia(TYPOGRAPHY);
+};
+const getFontSizeByKey = (value) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  const { TYPOGRAPHY } = CONFIG;
+  return (0, import_utils.getSequenceValuePropertyPair)(
+    value,
+    "fontSize",
+    TYPOGRAPHY
+  );
+};

package/dist/cjs/tests/index.js

@@ -0,0 +1,28 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var tests_exports = {};
+__export(tests_exports, {
+  testWCAGAA: () => testWCAGAA,
+  testWCAGAAA: () => testWCAGAAA
+});
+module.exports = __toCommonJS(tests_exports);
+const testWCAGAA = (colorA, colorB) => {
+};
+const testWCAGAAA = (colorA, colorB) => {
+};

package/dist/cjs/utils/color.js

@@ -0,0 +1,163 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var color_exports = {};
+__export(color_exports, {
+  changeLightness: () => changeLightness,
+  colorStringToRgbaArray: () => colorStringToRgbaArray,
+  getColorShade: () => getColorShade,
+  hexToRgb: () => hexToRgb,
+  hexToRgbArray: () => hexToRgbArray,
+  hexToRgba: () => hexToRgba,
+  hslToRgb: () => hslToRgb,
+  mixTwoColors: () => mixTwoColors,
+  mixTwoRgb: () => mixTwoRgb,
+  mixTwoRgba: () => mixTwoRgba,
+  opacify: () => opacify,
+  rgbArrayToHex: () => rgbArrayToHex,
+  rgbToHSL: () => rgbToHSL,
+  rgbToHex: () => rgbToHex
+});
+module.exports = __toCommonJS(color_exports);
+var import_globals = require("@domql/globals");
+const ENV = "development";
+const colorStringToRgbaArray = (color) => {
+  if (color === "")
+    return;
+  if (color.toLowerCase() === "transparent")
+    return [0, 0, 0, 0];
+  if (color[0] === "#") {
+    if (color.length < 7) {
+      color = "#" + color[1] + color[1] + color[2] + color[2] + color[3] + color[3] + (color.length > 4 ? color[4] + color[4] : "");
+    }
+    return [
+      parseInt(color.substr(1, 2), 16),
+      parseInt(color.substr(3, 2), 16),
+      parseInt(color.substr(5, 2), 16),
+      color.length > 7 ? parseInt(color.substr(7, 2), 16) / 255 : 1
+    ];
+  }
+  if (color.indexOf("rgb") === -1) {
+    if (import_globals.document && import_globals.window) {
+      const elem = import_globals.document.body.appendChild(import_globals.document.createElement("fictum"));
+      const flag = "rgb(1, 2, 3)";
+      elem.style.color = flag;
+      if (elem.style.color !== flag)
+        return;
+      elem.style.color = color;
+      if (elem.style.color === flag || elem.style.color === "")
+        return;
+      color = import_globals.window.getComputedStyle(elem).color;
+      import_globals.document.body.removeChild(elem);
+    } else
+      console.warn("Color conversion failed, no document or window object found");
+  }
+  if (color.indexOf("rgb") === 0) {
+    if (color.indexOf("rgba") === -1)
+      color = `${color}, 1`;
+    return color.match(/[\.\d]+/g).map((a) => +a);
+  }
+};
+const mixTwoColors = (colorA, colorB, range = 0.5) => {
+  colorA = colorStringToRgbaArray(colorA);
+  colorB = colorStringToRgbaArray(colorB);
+  return mixTwoRgba(colorA, colorB, range);
+};
+const hexToRgb = (hex, alpha = 1) => {
+  const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
+  return `rgb(${r},${g},${b})`;
+};
+const hexToRgbArray = (hex, alpha = 1) => {
+  const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
+  return [r, g, b];
+};
+const rgbToHex = (r, g, b) => {
+  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+};
+const rgbArrayToHex = ([r, g, b]) => {
+  return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+};
+const hexToRgba = (hex, alpha = 1) => {
+  const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
+  return `rgba(${r},${g},${b},${alpha})`;
+};
+const mixTwoRgb = (colorA, colorB, range = 0.5) => {
+  const arr = [];
+  for (let i = 0; i < 3; i++) {
+    arr[i] = ~~(colorA[i] + (colorB[i] - colorA[i]) * range);
+  }
+  return `rgb(${arr})`;
+};
+const changeLightness = (delta, hsl) => {
+  const [hue, saturation, lightness] = hsl;
+  const newLightness = Math.max(
+    0,
+    Math.min(100, lightness + parseFloat(delta))
+  );
+  return [hue, saturation, newLightness];
+};
+const rgbToHSL = (r, g, b) => {
+  const a = Math.max(r, g, b);
+  const n = a - Math.min(r, g, b);
+  const f = 1 - Math.abs(a + a - n - 1);
+  const h = n && (a == r ? (g - b) / n : a == g ? 2 + (b - r) / n : 4 + (r - g) / n);
+  return [60 * (h < 0 ? h + 6 : h), f ? n / f : 0, (a + a - n) / 2];
+};
+const hslToRgb = (h, s, l, a = s * Math.min(l, 1 - l), f = (n, k = (n + h / 30) % 12) => l - a * Math.max(
+  Math.min(k - 3, 9 - k, 1),
+  -1
+)) => [f(0), f(8), f(4)];
+const getColorShade = (col, amt) => {
+  const num = parseInt(col, 16);
+  let r = (num >> 16) + amt;
+  if (r > 255)
+    r = 255;
+  else if (r < 0)
+    r = 0;
+  let b = (num >> 8 & 255) + amt;
+  if (b > 255)
+    b = 255;
+  else if (b < 0)
+    b = 0;
+  let g = (num & 255) + amt;
+  if (g > 255)
+    g = 255;
+  else if (g < 0)
+    g = 0;
+  return (g | b << 8 | r << 16).toString(16);
+};
+const mixTwoRgba = (colorA, colorB, range = 0.5) => {
+  const arr = [];
+  for (let i = 0; i < 4; i++) {
+    const round = i === 3 ? (x) => x : Math.round;
+    arr[i] = round(
+      colorA[i] + (colorB[i] - colorA[i]) * range
+    );
+  }
+  return `rgba(${arr})`;
+};
+const opacify = (color, opacity) => {
+  const arr = colorStringToRgbaArray(color);
+  if (!arr) {
+    if (ENV === "test" || ENV === "development")
+      console.warn(color + "color is not rgba");
+    return;
+  }
+  arr[3] = opacity;
+  return `rgba(${arr})`;
+};