@livechat/chat-widget-design-tokens - npm Package Compare versions

Comparing version 0.0.3 to 1.0.0

dist/chat-widget-design-tokens.cjs.js

@@ -5,2 +5,4 @@ 'use strict';
 
+var polished = require('polished');
+
 var xs = '2px';
@@ -79,769 +81,8 @@ var sm = '4px';
 
-function _extends() {
-  _extends = Object.assign || 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.apply(this, arguments);
-}
-
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return self;
-}
-
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  subClass.__proto__ = superClass;
-}
-
-function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
-    return o.__proto__ || Object.getPrototypeOf(o);
-  };
-  return _getPrototypeOf(o);
-}
-
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
-}
-
-function _isNativeFunction(fn) {
-  return Function.toString.call(fn).indexOf("[native code]") !== -1;
-}
-
-function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-  if (Reflect.construct.sham) return false;
-  if (typeof Proxy === "function") return true;
-
-  try {
-    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-function _construct(Parent, args, Class) {
-  if (_isNativeReflectConstruct()) {
-    _construct = Reflect.construct;
-  } else {
-    _construct = function _construct(Parent, args, Class) {
-      var a = [null];
-      a.push.apply(a, args);
-      var Constructor = Function.bind.apply(Parent, a);
-      var instance = new Constructor();
-      if (Class) _setPrototypeOf(instance, Class.prototype);
-      return instance;
-    };
-  }
-
-  return _construct.apply(null, arguments);
-}
-
-function _wrapNativeSuper(Class) {
-  var _cache = typeof Map === "function" ? new Map() : undefined;
-
-  _wrapNativeSuper = function _wrapNativeSuper(Class) {
-    if (Class === null || !_isNativeFunction(Class)) return Class;
-
-    if (typeof Class !== "function") {
-      throw new TypeError("Super expression must either be null or a function");
-    }
-
-    if (typeof _cache !== "undefined") {
-      if (_cache.has(Class)) return _cache.get(Class);
-
-      _cache.set(Class, Wrapper);
-    }
-
-    function Wrapper() {
-      return _construct(Class, arguments, _getPrototypeOf(this).constructor);
-    }
-
-    Wrapper.prototype = Object.create(Class.prototype, {
-      constructor: {
-        value: Wrapper,
-        enumerable: false,
-        writable: true,
-        configurable: true
-      }
-    });
-    return _setPrototypeOf(Wrapper, Class);
-  };
-
-  return _wrapNativeSuper(Class);
-}
-
-/**
- * Parse errors.md and turn it into a simple hash of code: message
- * @private
- */
-
-var ERRORS = {
-  "1": "Passed invalid arguments to hsl, please pass multiple numbers e.g. hsl(360, 0.75, 0.4) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75 }).\n\n",
-  "2": "Passed invalid arguments to hsla, please pass multiple numbers e.g. hsla(360, 0.75, 0.4, 0.7) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75, alpha: 0.7 }).\n\n",
-  "3": "Passed an incorrect argument to a color function, please pass a string representation of a color.\n\n",
-  "4": "Couldn't generate valid rgb string from %s, it returned %s.\n\n",
-  "5": "Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.\n\n",
-  "6": "Passed invalid arguments to rgb, please pass multiple numbers e.g. rgb(255, 205, 100) or an object e.g. rgb({ red: 255, green: 205, blue: 100 }).\n\n",
-  "7": "Passed invalid arguments to rgba, please pass multiple numbers e.g. rgb(255, 205, 100, 0.75) or an object e.g. rgb({ red: 255, green: 205, blue: 100, alpha: 0.75 }).\n\n",
-  "8": "Passed invalid argument to toColorString, please pass a RgbColor, RgbaColor, HslColor or HslaColor object.\n\n",
-  "9": "Please provide a number of steps to the modularScale helper.\n\n",
-  "10": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
-  "11": "Invalid value passed as base to modularScale, expected number or em string but got \"%s\"\n\n",
-  "12": "Expected a string ending in \"px\" or a number passed as the first argument to %s(), got \"%s\" instead.\n\n",
-  "13": "Expected a string ending in \"px\" or a number passed as the second argument to %s(), got \"%s\" instead.\n\n",
-  "14": "Passed invalid pixel value (\"%s\") to %s(), please pass a value like \"12px\" or 12.\n\n",
-  "15": "Passed invalid base value (\"%s\") to %s(), please pass a value like \"12px\" or 12.\n\n",
-  "16": "You must provide a template to this method.\n\n",
-  "17": "You passed an unsupported selector state to this method.\n\n",
-  "18": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
-  "19": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
-  "20": "expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
-  "21": "expects the objects in the first argument array to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
-  "22": "expects the first argument object to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
-  "23": "fontFace expects a name of a font-family.\n\n",
-  "24": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
-  "25": "fontFace expects localFonts to be an array.\n\n",
-  "26": "fontFace expects fileFormats to be an array.\n\n",
-  "27": "radialGradient requries at least 2 color-stops to properly render.\n\n",
-  "28": "Please supply a filename to retinaImage() as the first argument.\n\n",
-  "29": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
-  "30": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
-  "31": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation\n\n",
-  "32": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s')\n\n",
-  "33": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation\n\n",
-  "34": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
-  "35": "borderRadius expects one of \"top\", \"bottom\", \"left\" or \"right\" as the first argument.\n\n",
-  "36": "Property must be a string value.\n\n",
-  "37": "Syntax Error at %s.\n\n",
-  "38": "Formula contains a function that needs parentheses at %s.\n\n",
-  "39": "Formula is missing closing parenthesis at %s.\n\n",
-  "40": "Formula has too many closing parentheses at %s.\n\n",
-  "41": "All values in a formula must have the same unit or be unitless.\n\n",
-  "42": "Please provide a number of steps to the modularScale helper.\n\n",
-  "43": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
-  "44": "Invalid value passed as base to modularScale, expected number or em/rem string but got %s.\n\n",
-  "45": "Passed invalid argument to hslToColorString, please pass a HslColor or HslaColor object.\n\n",
-  "46": "Passed invalid argument to rgbToColorString, please pass a RgbColor or RgbaColor object.\n\n",
-  "47": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
-  "48": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
-  "49": "Expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
-  "50": "Expects the objects in the first argument array to have the properties prop, fromSize, and toSize.\n\n",
-  "51": "Expects the first argument object to have the properties prop, fromSize, and toSize.\n\n",
-  "52": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
-  "53": "fontFace expects localFonts to be an array.\n\n",
-  "54": "fontFace expects fileFormats to be an array.\n\n",
-  "55": "fontFace expects a name of a font-family.\n\n",
-  "56": "linearGradient requries at least 2 color-stops to properly render.\n\n",
-  "57": "radialGradient requries at least 2 color-stops to properly render.\n\n",
-  "58": "Please supply a filename to retinaImage() as the first argument.\n\n",
-  "59": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
-  "60": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
-  "61": "Property must be a string value.\n\n",
-  "62": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
-  "63": "borderRadius expects one of \"top\", \"bottom\", \"left\" or \"right\" as the first argument.\n\n",
-  "64": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation.\n\n",
-  "65": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s').\n\n",
-  "66": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation.\n\n",
-  "67": "You must provide a template to this method.\n\n",
-  "68": "You passed an unsupported selector state to this method.\n\n",
-  "69": "Expected a string ending in \"px\" or a number passed as the first argument to %s(), got %s instead.\n\n",
-  "70": "Expected a string ending in \"px\" or a number passed as the second argument to %s(), got %s instead.\n\n",
-  "71": "Passed invalid pixel value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
-  "72": "Passed invalid base value %s to %s(), please pass a value like \"12px\" or 12.\n"
-};
-/**
- * super basic version of sprintf
- * @private
- */
-
-function format() {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
-
-  var a = args[0];
-  var b = [];
-  var c;
-
-  for (c = 1; c < args.length; c += 1) {
-    b.push(args[c]);
-  }
-
-  b.forEach(function (d) {
-    a = a.replace(/%[a-z]/, d);
-  });
-  return a;
-}
-/**
- * Create an error file out of errors.md for development and a simple web link to the full errors
- * in production mode.
- * @private
- */
-
-
-var PolishedError = /*#__PURE__*/function (_Error) {
-  _inheritsLoose(PolishedError, _Error);
-
-  function PolishedError(code) {
-    var _this;
-
-    if (process.env.NODE_ENV === 'production') {
-      _this = _Error.call(this, "An error occurred. See https://github.com/styled-components/polished/blob/master/src/internalHelpers/errors.md#" + code + " for more information.") || this;
-    } else {
-      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-        args[_key2 - 1] = arguments[_key2];
-      }
-
-      _this = _Error.call(this, format.apply(void 0, [ERRORS[code]].concat(args))) || this;
-    }
-
-    return _assertThisInitialized(_this);
-  }
-
-  return PolishedError;
-}( /*#__PURE__*/_wrapNativeSuper(Error));
-
-function colorToInt(color) {
-  return Math.round(color * 255);
-}
-
-function convertToInt(red, green, blue) {
-  return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue);
-}
-
-function hslToRgb(hue, saturation, lightness, convert) {
-  if (convert === void 0) {
-    convert = convertToInt;
-  }
-
-  if (saturation === 0) {
-    // achromatic
-    return convert(lightness, lightness, lightness);
-  } // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV
-
-
-  var huePrime = (hue % 360 + 360) % 360 / 60;
-  var chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
-  var secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
-  var red = 0;
-  var green = 0;
-  var blue = 0;
-
-  if (huePrime >= 0 && huePrime < 1) {
-    red = chroma;
-    green = secondComponent;
-  } else if (huePrime >= 1 && huePrime < 2) {
-    red = secondComponent;
-    green = chroma;
-  } else if (huePrime >= 2 && huePrime < 3) {
-    green = chroma;
-    blue = secondComponent;
-  } else if (huePrime >= 3 && huePrime < 4) {
-    green = secondComponent;
-    blue = chroma;
-  } else if (huePrime >= 4 && huePrime < 5) {
-    red = secondComponent;
-    blue = chroma;
-  } else if (huePrime >= 5 && huePrime < 6) {
-    red = chroma;
-    blue = secondComponent;
-  }
-
-  var lightnessModification = lightness - chroma / 2;
-  var finalRed = red + lightnessModification;
-  var finalGreen = green + lightnessModification;
-  var finalBlue = blue + lightnessModification;
-  return convert(finalRed, finalGreen, finalBlue);
-}
-
-var namedColorMap = {
-  aliceblue: 'f0f8ff',
-  antiquewhite: 'faebd7',
-  aqua: '00ffff',
-  aquamarine: '7fffd4',
-  azure: 'f0ffff',
-  beige: 'f5f5dc',
-  bisque: 'ffe4c4',
-  black: '000',
-  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',
-  gold: 'ffd700',
-  goldenrod: 'daa520',
-  gray: '808080',
-  green: '008000',
-  greenyellow: 'adff2f',
-  grey: '808080',
-  honeydew: 'f0fff0',
-  hotpink: 'ff69b4',
-  indianred: 'cd5c5c',
-  indigo: '4b0082',
-  ivory: 'fffff0',
-  khaki: 'f0e68c',
-  lavender: 'e6e6fa',
-  lavenderblush: 'fff0f5',
-  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: '789',
-  lightslategrey: '789',
-  lightsteelblue: 'b0c4de',
-  lightyellow: 'ffffe0',
-  lime: '0f0',
-  limegreen: '32cd32',
-  linen: 'faf0e6',
-  magenta: 'f0f',
-  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: '639',
-  red: 'f00',
-  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: 'fff',
-  whitesmoke: 'f5f5f5',
-  yellow: 'ff0',
-  yellowgreen: '9acd32'
-  /**
-   * Checks if a string is a CSS named color and returns its equivalent hex value, otherwise returns the original color.
-   * @private
-   */
-
-};
-
-function nameToHex(color) {
-  if (typeof color !== 'string') return color;
-  var normalizedColorName = color.toLowerCase();
-  return namedColorMap[normalizedColorName] ? "#" + namedColorMap[normalizedColorName] : color;
-}
-
-var hexRegex = /^#[a-fA-F0-9]{6}$/;
-var hexRgbaRegex = /^#[a-fA-F0-9]{8}$/;
-var reducedHexRegex = /^#[a-fA-F0-9]{3}$/;
-var reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/;
-var rgbRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i;
-var rgbaRegex = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
-var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*\)$/i;
-var hslaRegex = /^hsla\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
-/**
- * Returns an RgbColor or RgbaColor object. This utility function is only useful
- * if want to extract a color component. With the color util `toColorString` you
- * can convert a RgbColor or RgbaColor object back to a string.
- *
- * @example
- * // Assigns `{ red: 255, green: 0, blue: 0 }` to color1
- * const color1 = parseToRgb('rgb(255, 0, 0)');
- * // Assigns `{ red: 92, green: 102, blue: 112, alpha: 0.75 }` to color2
- * const color2 = parseToRgb('hsla(210, 10%, 40%, 0.75)');
- */
-
-function parseToRgb(color) {
-  if (typeof color !== 'string') {
-    throw new PolishedError(3);
-  }
-
-  var normalizedColor = nameToHex(color);
-
-  if (normalizedColor.match(hexRegex)) {
-    return {
-      red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
-      green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
-      blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16)
-    };
-  }
-
-  if (normalizedColor.match(hexRgbaRegex)) {
-    var alpha = parseFloat((parseInt("" + normalizedColor[7] + normalizedColor[8], 16) / 255).toFixed(2));
-    return {
-      red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
-      green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
-      blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16),
-      alpha: alpha
-    };
-  }
-
-  if (normalizedColor.match(reducedHexRegex)) {
-    return {
-      red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
-      green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
-      blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16)
-    };
-  }
-
-  if (normalizedColor.match(reducedRgbaHexRegex)) {
-    var _alpha = parseFloat((parseInt("" + normalizedColor[4] + normalizedColor[4], 16) / 255).toFixed(2));
-
-    return {
-      red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
-      green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
-      blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16),
-      alpha: _alpha
-    };
-  }
-
-  var rgbMatched = rgbRegex.exec(normalizedColor);
-
-  if (rgbMatched) {
-    return {
-      red: parseInt("" + rgbMatched[1], 10),
-      green: parseInt("" + rgbMatched[2], 10),
-      blue: parseInt("" + rgbMatched[3], 10)
-    };
-  }
-
-  var rgbaMatched = rgbaRegex.exec(normalizedColor);
-
-  if (rgbaMatched) {
-    return {
-      red: parseInt("" + rgbaMatched[1], 10),
-      green: parseInt("" + rgbaMatched[2], 10),
-      blue: parseInt("" + rgbaMatched[3], 10),
-      alpha: parseFloat("" + rgbaMatched[4])
-    };
-  }
-
-  var hslMatched = hslRegex.exec(normalizedColor);
-
-  if (hslMatched) {
-    var hue = parseInt("" + hslMatched[1], 10);
-    var saturation = parseInt("" + hslMatched[2], 10) / 100;
-    var lightness = parseInt("" + hslMatched[3], 10) / 100;
-    var rgbColorString = "rgb(" + hslToRgb(hue, saturation, lightness) + ")";
-    var hslRgbMatched = rgbRegex.exec(rgbColorString);
-
-    if (!hslRgbMatched) {
-      throw new PolishedError(4, normalizedColor, rgbColorString);
-    }
-
-    return {
-      red: parseInt("" + hslRgbMatched[1], 10),
-      green: parseInt("" + hslRgbMatched[2], 10),
-      blue: parseInt("" + hslRgbMatched[3], 10)
-    };
-  }
-
-  var hslaMatched = hslaRegex.exec(normalizedColor);
-
-  if (hslaMatched) {
-    var _hue = parseInt("" + hslaMatched[1], 10);
-
-    var _saturation = parseInt("" + hslaMatched[2], 10) / 100;
-
-    var _lightness = parseInt("" + hslaMatched[3], 10) / 100;
-
-    var _rgbColorString = "rgb(" + hslToRgb(_hue, _saturation, _lightness) + ")";
-
-    var _hslRgbMatched = rgbRegex.exec(_rgbColorString);
-
-    if (!_hslRgbMatched) {
-      throw new PolishedError(4, normalizedColor, _rgbColorString);
-    }
-
-    return {
-      red: parseInt("" + _hslRgbMatched[1], 10),
-      green: parseInt("" + _hslRgbMatched[2], 10),
-      blue: parseInt("" + _hslRgbMatched[3], 10),
-      alpha: parseFloat("" + hslaMatched[4])
-    };
-  }
-
-  throw new PolishedError(5);
-}
-/**
- * Reduces hex values if possible e.g. #ff8866 to #f86
- * @private
- */
-
-
-var reduceHexValue = function reduceHexValue(value) {
-  if (value.length === 7 && value[1] === value[2] && value[3] === value[4] && value[5] === value[6]) {
-    return "#" + value[1] + value[3] + value[5];
-  }
-
-  return value;
-};
-
-function numberToHex(value) {
-  var hex = value.toString(16);
-  return hex.length === 1 ? "0" + hex : hex;
-}
-/**
- * Returns a string value for the color. The returned result is the smallest possible hex notation.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: rgb(255, 205, 100),
- *   background: rgb({ red: 255, green: 205, blue: 100 }),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${rgb(255, 205, 100)};
- *   background: ${rgb({ red: 255, green: 205, blue: 100 })};
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "#ffcd64";
- *   background: "#ffcd64";
- * }
- */
-
-
-function rgb(value, green, blue) {
-  if (typeof value === 'number' && typeof green === 'number' && typeof blue === 'number') {
-    return reduceHexValue("#" + numberToHex(value) + numberToHex(green) + numberToHex(blue));
-  } else if (typeof value === 'object' && green === undefined && blue === undefined) {
-    return reduceHexValue("#" + numberToHex(value.red) + numberToHex(value.green) + numberToHex(value.blue));
-  }
-
-  throw new PolishedError(6);
-}
-/**
- * Returns a string value for the color. The returned result is the smallest possible rgba or hex notation.
- *
- * Can also be used to fade a color by passing a hex value or named CSS color along with an alpha value.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: rgba(255, 205, 100, 0.7),
- *   background: rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 }),
- *   background: rgba(255, 205, 100, 1),
- *   background: rgba('#ffffff', 0.4),
- *   background: rgba('black', 0.7),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${rgba(255, 205, 100, 0.7)};
- *   background: ${rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 })};
- *   background: ${rgba(255, 205, 100, 1)};
- *   background: ${rgba('#ffffff', 0.4)};
- *   background: ${rgba('black', 0.7)};
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "rgba(255,205,100,0.7)";
- *   background: "rgba(255,205,100,0.7)";
- *   background: "#ffcd64";
- *   background: "rgba(255,255,255,0.4)";
- *   background: "rgba(0,0,0,0.7)";
- * }
- */
-
-
-function rgba(firstValue, secondValue, thirdValue, fourthValue) {
-  if (typeof firstValue === 'string' && typeof secondValue === 'number') {
-    var rgbValue = parseToRgb(firstValue);
-    return "rgba(" + rgbValue.red + "," + rgbValue.green + "," + rgbValue.blue + "," + secondValue + ")";
-  } else if (typeof firstValue === 'number' && typeof secondValue === 'number' && typeof thirdValue === 'number' && typeof fourthValue === 'number') {
-    return fourthValue >= 1 ? rgb(firstValue, secondValue, thirdValue) : "rgba(" + firstValue + "," + secondValue + "," + thirdValue + "," + fourthValue + ")";
-  } else if (typeof firstValue === 'object' && secondValue === undefined && thirdValue === undefined && fourthValue === undefined) {
-    return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
-  }
-
-  throw new PolishedError(7);
-}
-// eslint-disable-next-line no-unused-vars
-// eslint-disable-next-line no-unused-vars
-// eslint-disable-next-line no-redeclare
-
-
-function curried(f, length, acc) {
-  return function fn() {
-    // eslint-disable-next-line prefer-rest-params
-    var combined = acc.concat(Array.prototype.slice.call(arguments));
-    return combined.length >= length ? f.apply(this, combined) : curried(f, length, combined);
-  };
-} // eslint-disable-next-line no-redeclare
-
-
-function curry(f) {
-  // eslint-disable-line no-redeclare
-  return curried(f, f.length, []);
-}
-
-function guard(lowerBoundary, upperBoundary, value) {
-  return Math.max(lowerBoundary, Math.min(upperBoundary, value));
-}
-/**
- * Increases the opacity of a color. Its range for the amount is between 0 to 1.
- *
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: opacify(0.1, 'rgba(255, 255, 255, 0.9)');
- *   background: opacify(0.2, 'hsla(0, 0%, 100%, 0.5)'),
- *   background: opacify('0.5', 'rgba(255, 0, 0, 0.2)'),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${opacify(0.1, 'rgba(255, 255, 255, 0.9)')};
- *   background: ${opacify(0.2, 'hsla(0, 0%, 100%, 0.5)')},
- *   background: ${opacify('0.5', 'rgba(255, 0, 0, 0.2)')},
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "#fff";
- *   background: "rgba(255,255,255,0.7)";
- *   background: "rgba(255,0,0,0.7)";
- * }
- */
-
-function opacify(amount, color) {
-  if (color === 'transparent') return color;
-  var parsedColor = parseToRgb(color);
-  var alpha = typeof parsedColor.alpha === 'number' ? parsedColor.alpha : 1;
-
-  var colorWithAlpha = _extends({}, parsedColor, {
-    alpha: guard(0, 1, (alpha * 100 + parseFloat(amount) * 100) / 100)
-  });
-
-  return rgba(colorWithAlpha);
-} // prettier-ignore
-
-
-var curriedOpacify = /*#__PURE__*/curry
-/* ::<number | string, string, string> */
-(opacify);
-
 var baseShadowColor = 'rgba(0, 0, 0, 0)';
-var xs$1 = "0px 1px 2px " + curriedOpacify(0.1, baseShadowColor);
-var sm$1 = "0px 0px 8px " + curriedOpacify(0.2, baseShadowColor);
-var md$1 = "0px 1px 10px " + curriedOpacify(0.2, baseShadowColor);
-var lg$1 = "0px 0px 24px " + curriedOpacify(0.2, baseShadowColor);
-var floating = "0 4px 12px " + curriedOpacify(0.3, baseShadowColor);
+var xs$1 = "0px 1px 2px " + polished.opacify(0.1, baseShadowColor);
+var sm$1 = "0px 0px 8px " + polished.opacify(0.2, baseShadowColor);
+var md$1 = "0px 1px 10px " + polished.opacify(0.2, baseShadowColor);
+var lg$1 = "0px 0px 24px " + polished.opacify(0.2, baseShadowColor);
+var floating = "0 4px 12px " + polished.opacify(0.3, baseShadowColor);
 var outline = "0 0 0 1px " + accent;
@@ -859,4 +100,4 @@
 
-function _extends$1() {
-  _extends$1 = Object.assign || function (target) {
+function _extends() {
+  _extends = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -875,6 +116,6 @@ var source = arguments[i];
 
-  return _extends$1.apply(this, arguments);
+  return _extends.apply(this, arguments);
 }
 
-var light = _extends$1({}, colorPalette, {
+var light = _extends({}, colorPalette, {
   border: grayscale[500],
@@ -908,3 +149,3 @@ divider: grayscale[100],
 });
-var dark = _extends$1({}, colorPalette, {
+var dark = _extends({}, colorPalette, {
   border: grayscale[600],
@@ -1042,2 +283,3 @@ divider: grayscale[600],
 exports.boxShadows = boxShadows;
+exports.colorPalette = colorPalette;
 exports.colors = colors;
@@ -1044,0 +286,0 @@ exports.fontSizes = fontSizes;

dist/chat-widget-design-tokens.es.js

@@ -0,1 +1,3 @@
+import { opacify } from 'polished';
+
 var xs = '2px';
@@ -74,769 +76,8 @@ var sm = '4px';
 
-function _extends() {
-  _extends = Object.assign || 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.apply(this, arguments);
-}
-
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return self;
-}
-
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  subClass.__proto__ = superClass;
-}
-
-function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
-    return o.__proto__ || Object.getPrototypeOf(o);
-  };
-  return _getPrototypeOf(o);
-}
-
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
-}
-
-function _isNativeFunction(fn) {
-  return Function.toString.call(fn).indexOf("[native code]") !== -1;
-}
-
-function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-  if (Reflect.construct.sham) return false;
-  if (typeof Proxy === "function") return true;
-
-  try {
-    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-function _construct(Parent, args, Class) {
-  if (_isNativeReflectConstruct()) {
-    _construct = Reflect.construct;
-  } else {
-    _construct = function _construct(Parent, args, Class) {
-      var a = [null];
-      a.push.apply(a, args);
-      var Constructor = Function.bind.apply(Parent, a);
-      var instance = new Constructor();
-      if (Class) _setPrototypeOf(instance, Class.prototype);
-      return instance;
-    };
-  }
-
-  return _construct.apply(null, arguments);
-}
-
-function _wrapNativeSuper(Class) {
-  var _cache = typeof Map === "function" ? new Map() : undefined;
-
-  _wrapNativeSuper = function _wrapNativeSuper(Class) {
-    if (Class === null || !_isNativeFunction(Class)) return Class;
-
-    if (typeof Class !== "function") {
-      throw new TypeError("Super expression must either be null or a function");
-    }
-
-    if (typeof _cache !== "undefined") {
-      if (_cache.has(Class)) return _cache.get(Class);
-
-      _cache.set(Class, Wrapper);
-    }
-
-    function Wrapper() {
-      return _construct(Class, arguments, _getPrototypeOf(this).constructor);
-    }
-
-    Wrapper.prototype = Object.create(Class.prototype, {
-      constructor: {
-        value: Wrapper,
-        enumerable: false,
-        writable: true,
-        configurable: true
-      }
-    });
-    return _setPrototypeOf(Wrapper, Class);
-  };
-
-  return _wrapNativeSuper(Class);
-}
-
-/**
- * Parse errors.md and turn it into a simple hash of code: message
- * @private
- */
-
-var ERRORS = {
-  "1": "Passed invalid arguments to hsl, please pass multiple numbers e.g. hsl(360, 0.75, 0.4) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75 }).\n\n",
-  "2": "Passed invalid arguments to hsla, please pass multiple numbers e.g. hsla(360, 0.75, 0.4, 0.7) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75, alpha: 0.7 }).\n\n",
-  "3": "Passed an incorrect argument to a color function, please pass a string representation of a color.\n\n",
-  "4": "Couldn't generate valid rgb string from %s, it returned %s.\n\n",
-  "5": "Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.\n\n",
-  "6": "Passed invalid arguments to rgb, please pass multiple numbers e.g. rgb(255, 205, 100) or an object e.g. rgb({ red: 255, green: 205, blue: 100 }).\n\n",
-  "7": "Passed invalid arguments to rgba, please pass multiple numbers e.g. rgb(255, 205, 100, 0.75) or an object e.g. rgb({ red: 255, green: 205, blue: 100, alpha: 0.75 }).\n\n",
-  "8": "Passed invalid argument to toColorString, please pass a RgbColor, RgbaColor, HslColor or HslaColor object.\n\n",
-  "9": "Please provide a number of steps to the modularScale helper.\n\n",
-  "10": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
-  "11": "Invalid value passed as base to modularScale, expected number or em string but got \"%s\"\n\n",
-  "12": "Expected a string ending in \"px\" or a number passed as the first argument to %s(), got \"%s\" instead.\n\n",
-  "13": "Expected a string ending in \"px\" or a number passed as the second argument to %s(), got \"%s\" instead.\n\n",
-  "14": "Passed invalid pixel value (\"%s\") to %s(), please pass a value like \"12px\" or 12.\n\n",
-  "15": "Passed invalid base value (\"%s\") to %s(), please pass a value like \"12px\" or 12.\n\n",
-  "16": "You must provide a template to this method.\n\n",
-  "17": "You passed an unsupported selector state to this method.\n\n",
-  "18": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
-  "19": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
-  "20": "expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
-  "21": "expects the objects in the first argument array to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
-  "22": "expects the first argument object to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
-  "23": "fontFace expects a name of a font-family.\n\n",
-  "24": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
-  "25": "fontFace expects localFonts to be an array.\n\n",
-  "26": "fontFace expects fileFormats to be an array.\n\n",
-  "27": "radialGradient requries at least 2 color-stops to properly render.\n\n",
-  "28": "Please supply a filename to retinaImage() as the first argument.\n\n",
-  "29": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
-  "30": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
-  "31": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation\n\n",
-  "32": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s')\n\n",
-  "33": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation\n\n",
-  "34": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
-  "35": "borderRadius expects one of \"top\", \"bottom\", \"left\" or \"right\" as the first argument.\n\n",
-  "36": "Property must be a string value.\n\n",
-  "37": "Syntax Error at %s.\n\n",
-  "38": "Formula contains a function that needs parentheses at %s.\n\n",
-  "39": "Formula is missing closing parenthesis at %s.\n\n",
-  "40": "Formula has too many closing parentheses at %s.\n\n",
-  "41": "All values in a formula must have the same unit or be unitless.\n\n",
-  "42": "Please provide a number of steps to the modularScale helper.\n\n",
-  "43": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
-  "44": "Invalid value passed as base to modularScale, expected number or em/rem string but got %s.\n\n",
-  "45": "Passed invalid argument to hslToColorString, please pass a HslColor or HslaColor object.\n\n",
-  "46": "Passed invalid argument to rgbToColorString, please pass a RgbColor or RgbaColor object.\n\n",
-  "47": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
-  "48": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
-  "49": "Expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
-  "50": "Expects the objects in the first argument array to have the properties prop, fromSize, and toSize.\n\n",
-  "51": "Expects the first argument object to have the properties prop, fromSize, and toSize.\n\n",
-  "52": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
-  "53": "fontFace expects localFonts to be an array.\n\n",
-  "54": "fontFace expects fileFormats to be an array.\n\n",
-  "55": "fontFace expects a name of a font-family.\n\n",
-  "56": "linearGradient requries at least 2 color-stops to properly render.\n\n",
-  "57": "radialGradient requries at least 2 color-stops to properly render.\n\n",
-  "58": "Please supply a filename to retinaImage() as the first argument.\n\n",
-  "59": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
-  "60": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
-  "61": "Property must be a string value.\n\n",
-  "62": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
-  "63": "borderRadius expects one of \"top\", \"bottom\", \"left\" or \"right\" as the first argument.\n\n",
-  "64": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation.\n\n",
-  "65": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s').\n\n",
-  "66": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation.\n\n",
-  "67": "You must provide a template to this method.\n\n",
-  "68": "You passed an unsupported selector state to this method.\n\n",
-  "69": "Expected a string ending in \"px\" or a number passed as the first argument to %s(), got %s instead.\n\n",
-  "70": "Expected a string ending in \"px\" or a number passed as the second argument to %s(), got %s instead.\n\n",
-  "71": "Passed invalid pixel value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
-  "72": "Passed invalid base value %s to %s(), please pass a value like \"12px\" or 12.\n"
-};
-/**
- * super basic version of sprintf
- * @private
- */
-
-function format() {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
-
-  var a = args[0];
-  var b = [];
-  var c;
-
-  for (c = 1; c < args.length; c += 1) {
-    b.push(args[c]);
-  }
-
-  b.forEach(function (d) {
-    a = a.replace(/%[a-z]/, d);
-  });
-  return a;
-}
-/**
- * Create an error file out of errors.md for development and a simple web link to the full errors
- * in production mode.
- * @private
- */
-
-
-var PolishedError = /*#__PURE__*/function (_Error) {
-  _inheritsLoose(PolishedError, _Error);
-
-  function PolishedError(code) {
-    var _this;
-
-    if (process.env.NODE_ENV === 'production') {
-      _this = _Error.call(this, "An error occurred. See https://github.com/styled-components/polished/blob/master/src/internalHelpers/errors.md#" + code + " for more information.") || this;
-    } else {
-      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-        args[_key2 - 1] = arguments[_key2];
-      }
-
-      _this = _Error.call(this, format.apply(void 0, [ERRORS[code]].concat(args))) || this;
-    }
-
-    return _assertThisInitialized(_this);
-  }
-
-  return PolishedError;
-}( /*#__PURE__*/_wrapNativeSuper(Error));
-
-function colorToInt(color) {
-  return Math.round(color * 255);
-}
-
-function convertToInt(red, green, blue) {
-  return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue);
-}
-
-function hslToRgb(hue, saturation, lightness, convert) {
-  if (convert === void 0) {
-    convert = convertToInt;
-  }
-
-  if (saturation === 0) {
-    // achromatic
-    return convert(lightness, lightness, lightness);
-  } // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV
-
-
-  var huePrime = (hue % 360 + 360) % 360 / 60;
-  var chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
-  var secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
-  var red = 0;
-  var green = 0;
-  var blue = 0;
-
-  if (huePrime >= 0 && huePrime < 1) {
-    red = chroma;
-    green = secondComponent;
-  } else if (huePrime >= 1 && huePrime < 2) {
-    red = secondComponent;
-    green = chroma;
-  } else if (huePrime >= 2 && huePrime < 3) {
-    green = chroma;
-    blue = secondComponent;
-  } else if (huePrime >= 3 && huePrime < 4) {
-    green = secondComponent;
-    blue = chroma;
-  } else if (huePrime >= 4 && huePrime < 5) {
-    red = secondComponent;
-    blue = chroma;
-  } else if (huePrime >= 5 && huePrime < 6) {
-    red = chroma;
-    blue = secondComponent;
-  }
-
-  var lightnessModification = lightness - chroma / 2;
-  var finalRed = red + lightnessModification;
-  var finalGreen = green + lightnessModification;
-  var finalBlue = blue + lightnessModification;
-  return convert(finalRed, finalGreen, finalBlue);
-}
-
-var namedColorMap = {
-  aliceblue: 'f0f8ff',
-  antiquewhite: 'faebd7',
-  aqua: '00ffff',
-  aquamarine: '7fffd4',
-  azure: 'f0ffff',
-  beige: 'f5f5dc',
-  bisque: 'ffe4c4',
-  black: '000',
-  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',
-  gold: 'ffd700',
-  goldenrod: 'daa520',
-  gray: '808080',
-  green: '008000',
-  greenyellow: 'adff2f',
-  grey: '808080',
-  honeydew: 'f0fff0',
-  hotpink: 'ff69b4',
-  indianred: 'cd5c5c',
-  indigo: '4b0082',
-  ivory: 'fffff0',
-  khaki: 'f0e68c',
-  lavender: 'e6e6fa',
-  lavenderblush: 'fff0f5',
-  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: '789',
-  lightslategrey: '789',
-  lightsteelblue: 'b0c4de',
-  lightyellow: 'ffffe0',
-  lime: '0f0',
-  limegreen: '32cd32',
-  linen: 'faf0e6',
-  magenta: 'f0f',
-  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: '639',
-  red: 'f00',
-  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: 'fff',
-  whitesmoke: 'f5f5f5',
-  yellow: 'ff0',
-  yellowgreen: '9acd32'
-  /**
-   * Checks if a string is a CSS named color and returns its equivalent hex value, otherwise returns the original color.
-   * @private
-   */
-
-};
-
-function nameToHex(color) {
-  if (typeof color !== 'string') return color;
-  var normalizedColorName = color.toLowerCase();
-  return namedColorMap[normalizedColorName] ? "#" + namedColorMap[normalizedColorName] : color;
-}
-
-var hexRegex = /^#[a-fA-F0-9]{6}$/;
-var hexRgbaRegex = /^#[a-fA-F0-9]{8}$/;
-var reducedHexRegex = /^#[a-fA-F0-9]{3}$/;
-var reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/;
-var rgbRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i;
-var rgbaRegex = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
-var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*\)$/i;
-var hslaRegex = /^hsla\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
-/**
- * Returns an RgbColor or RgbaColor object. This utility function is only useful
- * if want to extract a color component. With the color util `toColorString` you
- * can convert a RgbColor or RgbaColor object back to a string.
- *
- * @example
- * // Assigns `{ red: 255, green: 0, blue: 0 }` to color1
- * const color1 = parseToRgb('rgb(255, 0, 0)');
- * // Assigns `{ red: 92, green: 102, blue: 112, alpha: 0.75 }` to color2
- * const color2 = parseToRgb('hsla(210, 10%, 40%, 0.75)');
- */
-
-function parseToRgb(color) {
-  if (typeof color !== 'string') {
-    throw new PolishedError(3);
-  }
-
-  var normalizedColor = nameToHex(color);
-
-  if (normalizedColor.match(hexRegex)) {
-    return {
-      red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
-      green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
-      blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16)
-    };
-  }
-
-  if (normalizedColor.match(hexRgbaRegex)) {
-    var alpha = parseFloat((parseInt("" + normalizedColor[7] + normalizedColor[8], 16) / 255).toFixed(2));
-    return {
-      red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
-      green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
-      blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16),
-      alpha: alpha
-    };
-  }
-
-  if (normalizedColor.match(reducedHexRegex)) {
-    return {
-      red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
-      green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
-      blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16)
-    };
-  }
-
-  if (normalizedColor.match(reducedRgbaHexRegex)) {
-    var _alpha = parseFloat((parseInt("" + normalizedColor[4] + normalizedColor[4], 16) / 255).toFixed(2));
-
-    return {
-      red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
-      green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
-      blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16),
-      alpha: _alpha
-    };
-  }
-
-  var rgbMatched = rgbRegex.exec(normalizedColor);
-
-  if (rgbMatched) {
-    return {
-      red: parseInt("" + rgbMatched[1], 10),
-      green: parseInt("" + rgbMatched[2], 10),
-      blue: parseInt("" + rgbMatched[3], 10)
-    };
-  }
-
-  var rgbaMatched = rgbaRegex.exec(normalizedColor);
-
-  if (rgbaMatched) {
-    return {
-      red: parseInt("" + rgbaMatched[1], 10),
-      green: parseInt("" + rgbaMatched[2], 10),
-      blue: parseInt("" + rgbaMatched[3], 10),
-      alpha: parseFloat("" + rgbaMatched[4])
-    };
-  }
-
-  var hslMatched = hslRegex.exec(normalizedColor);
-
-  if (hslMatched) {
-    var hue = parseInt("" + hslMatched[1], 10);
-    var saturation = parseInt("" + hslMatched[2], 10) / 100;
-    var lightness = parseInt("" + hslMatched[3], 10) / 100;
-    var rgbColorString = "rgb(" + hslToRgb(hue, saturation, lightness) + ")";
-    var hslRgbMatched = rgbRegex.exec(rgbColorString);
-
-    if (!hslRgbMatched) {
-      throw new PolishedError(4, normalizedColor, rgbColorString);
-    }
-
-    return {
-      red: parseInt("" + hslRgbMatched[1], 10),
-      green: parseInt("" + hslRgbMatched[2], 10),
-      blue: parseInt("" + hslRgbMatched[3], 10)
-    };
-  }
-
-  var hslaMatched = hslaRegex.exec(normalizedColor);
-
-  if (hslaMatched) {
-    var _hue = parseInt("" + hslaMatched[1], 10);
-
-    var _saturation = parseInt("" + hslaMatched[2], 10) / 100;
-
-    var _lightness = parseInt("" + hslaMatched[3], 10) / 100;
-
-    var _rgbColorString = "rgb(" + hslToRgb(_hue, _saturation, _lightness) + ")";
-
-    var _hslRgbMatched = rgbRegex.exec(_rgbColorString);
-
-    if (!_hslRgbMatched) {
-      throw new PolishedError(4, normalizedColor, _rgbColorString);
-    }
-
-    return {
-      red: parseInt("" + _hslRgbMatched[1], 10),
-      green: parseInt("" + _hslRgbMatched[2], 10),
-      blue: parseInt("" + _hslRgbMatched[3], 10),
-      alpha: parseFloat("" + hslaMatched[4])
-    };
-  }
-
-  throw new PolishedError(5);
-}
-/**
- * Reduces hex values if possible e.g. #ff8866 to #f86
- * @private
- */
-
-
-var reduceHexValue = function reduceHexValue(value) {
-  if (value.length === 7 && value[1] === value[2] && value[3] === value[4] && value[5] === value[6]) {
-    return "#" + value[1] + value[3] + value[5];
-  }
-
-  return value;
-};
-
-function numberToHex(value) {
-  var hex = value.toString(16);
-  return hex.length === 1 ? "0" + hex : hex;
-}
-/**
- * Returns a string value for the color. The returned result is the smallest possible hex notation.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: rgb(255, 205, 100),
- *   background: rgb({ red: 255, green: 205, blue: 100 }),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${rgb(255, 205, 100)};
- *   background: ${rgb({ red: 255, green: 205, blue: 100 })};
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "#ffcd64";
- *   background: "#ffcd64";
- * }
- */
-
-
-function rgb(value, green, blue) {
-  if (typeof value === 'number' && typeof green === 'number' && typeof blue === 'number') {
-    return reduceHexValue("#" + numberToHex(value) + numberToHex(green) + numberToHex(blue));
-  } else if (typeof value === 'object' && green === undefined && blue === undefined) {
-    return reduceHexValue("#" + numberToHex(value.red) + numberToHex(value.green) + numberToHex(value.blue));
-  }
-
-  throw new PolishedError(6);
-}
-/**
- * Returns a string value for the color. The returned result is the smallest possible rgba or hex notation.
- *
- * Can also be used to fade a color by passing a hex value or named CSS color along with an alpha value.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: rgba(255, 205, 100, 0.7),
- *   background: rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 }),
- *   background: rgba(255, 205, 100, 1),
- *   background: rgba('#ffffff', 0.4),
- *   background: rgba('black', 0.7),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${rgba(255, 205, 100, 0.7)};
- *   background: ${rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 })};
- *   background: ${rgba(255, 205, 100, 1)};
- *   background: ${rgba('#ffffff', 0.4)};
- *   background: ${rgba('black', 0.7)};
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "rgba(255,205,100,0.7)";
- *   background: "rgba(255,205,100,0.7)";
- *   background: "#ffcd64";
- *   background: "rgba(255,255,255,0.4)";
- *   background: "rgba(0,0,0,0.7)";
- * }
- */
-
-
-function rgba(firstValue, secondValue, thirdValue, fourthValue) {
-  if (typeof firstValue === 'string' && typeof secondValue === 'number') {
-    var rgbValue = parseToRgb(firstValue);
-    return "rgba(" + rgbValue.red + "," + rgbValue.green + "," + rgbValue.blue + "," + secondValue + ")";
-  } else if (typeof firstValue === 'number' && typeof secondValue === 'number' && typeof thirdValue === 'number' && typeof fourthValue === 'number') {
-    return fourthValue >= 1 ? rgb(firstValue, secondValue, thirdValue) : "rgba(" + firstValue + "," + secondValue + "," + thirdValue + "," + fourthValue + ")";
-  } else if (typeof firstValue === 'object' && secondValue === undefined && thirdValue === undefined && fourthValue === undefined) {
-    return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
-  }
-
-  throw new PolishedError(7);
-}
-// eslint-disable-next-line no-unused-vars
-// eslint-disable-next-line no-unused-vars
-// eslint-disable-next-line no-redeclare
-
-
-function curried(f, length, acc) {
-  return function fn() {
-    // eslint-disable-next-line prefer-rest-params
-    var combined = acc.concat(Array.prototype.slice.call(arguments));
-    return combined.length >= length ? f.apply(this, combined) : curried(f, length, combined);
-  };
-} // eslint-disable-next-line no-redeclare
-
-
-function curry(f) {
-  // eslint-disable-line no-redeclare
-  return curried(f, f.length, []);
-}
-
-function guard(lowerBoundary, upperBoundary, value) {
-  return Math.max(lowerBoundary, Math.min(upperBoundary, value));
-}
-/**
- * Increases the opacity of a color. Its range for the amount is between 0 to 1.
- *
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: opacify(0.1, 'rgba(255, 255, 255, 0.9)');
- *   background: opacify(0.2, 'hsla(0, 0%, 100%, 0.5)'),
- *   background: opacify('0.5', 'rgba(255, 0, 0, 0.2)'),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${opacify(0.1, 'rgba(255, 255, 255, 0.9)')};
- *   background: ${opacify(0.2, 'hsla(0, 0%, 100%, 0.5)')},
- *   background: ${opacify('0.5', 'rgba(255, 0, 0, 0.2)')},
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "#fff";
- *   background: "rgba(255,255,255,0.7)";
- *   background: "rgba(255,0,0,0.7)";
- * }
- */
-
-function opacify(amount, color) {
-  if (color === 'transparent') return color;
-  var parsedColor = parseToRgb(color);
-  var alpha = typeof parsedColor.alpha === 'number' ? parsedColor.alpha : 1;
-
-  var colorWithAlpha = _extends({}, parsedColor, {
-    alpha: guard(0, 1, (alpha * 100 + parseFloat(amount) * 100) / 100)
-  });
-
-  return rgba(colorWithAlpha);
-} // prettier-ignore
-
-
-var curriedOpacify = /*#__PURE__*/curry
-/* ::<number | string, string, string> */
-(opacify);
-
 var baseShadowColor = 'rgba(0, 0, 0, 0)';
-var xs$1 = "0px 1px 2px " + curriedOpacify(0.1, baseShadowColor);
-var sm$1 = "0px 0px 8px " + curriedOpacify(0.2, baseShadowColor);
-var md$1 = "0px 1px 10px " + curriedOpacify(0.2, baseShadowColor);
-var lg$1 = "0px 0px 24px " + curriedOpacify(0.2, baseShadowColor);
-var floating = "0 4px 12px " + curriedOpacify(0.3, baseShadowColor);
+var xs$1 = "0px 1px 2px " + opacify(0.1, baseShadowColor);
+var sm$1 = "0px 0px 8px " + opacify(0.2, baseShadowColor);
+var md$1 = "0px 1px 10px " + opacify(0.2, baseShadowColor);
+var lg$1 = "0px 0px 24px " + opacify(0.2, baseShadowColor);
+var floating = "0 4px 12px " + opacify(0.3, baseShadowColor);
 var outline = "0 0 0 1px " + accent;
@@ -854,4 +95,4 @@
 
-function _extends$1() {
-  _extends$1 = Object.assign || function (target) {
+function _extends() {
+  _extends = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -870,6 +111,6 @@ var source = arguments[i];
 
-  return _extends$1.apply(this, arguments);
+  return _extends.apply(this, arguments);
 }
 
-var light = _extends$1({}, colorPalette, {
+var light = _extends({}, colorPalette, {
   border: grayscale[500],
@@ -903,3 +144,3 @@ divider: grayscale[100],
 });
-var dark = _extends$1({}, colorPalette, {
+var dark = _extends({}, colorPalette, {
   border: grayscale[600],
@@ -1035,2 +276,2 @@ divider: grayscale[600],
 
-export { borderRadiuses, boxShadows, colors, fontSizes, pxToRem, spaces, transitions, typography };
+export { borderRadiuses, boxShadows, colorPalette, colors, fontSizes, pxToRem, spaces, transitions, typography };

package.json

 {
   "name": "@livechat/chat-widget-design-tokens",
-  "version": "0.0.3",
-  "publishConfig": {
-    "access": "restricted"
-  },
+  "version": "1.0.0",
   "description": "",
@@ -16,2 +13,3 @@ "contributors": [
   "module": "dist/chat-widget-design-tokens.es.js",
+  "unpkg": "dist/chat-widget-design-tokens.umd.js",
   "jsnext:main": "dist/chat-widget-design-tokens.es.js",
@@ -24,3 +22,5 @@ "types": "./types",
   "keywords": [],
-  "dependencies": {},
+  "dependencies": {
+    "polished": "^3.4.1"
+  },
   "devDependencies": {
@@ -27,0 +27,0 @@ "@babel/core": "^7.10.5",

README.md

@@ -9,3 +9,4 @@ # Chat Widget Design Tokens
 
-- Colors
+- Color tokens
+- Color palette
 - Spaces
@@ -20,10 +21,22 @@ - Typography
 
-```sh
+---
+
+Using npm:
+
+```bash
 npm install @livechat/chat-widget-design-tokens
 ```
 
+or using yarn:
+
+```bash
+yarn add @livechat/chat-widget-design-tokens
+```
+
 ## Importing
 
+---
+
 ```js
-import { colors } from '@livechat/chat-widget-design-tokens'
+import { colors, spaces } from '@livechat/chat-widget-design-tokens'
 ```
@@ -33,8 +46,64 @@
 
-```js
-const styles = { backgroundColor: colors.grayscale[50] }
+---
+
+```html
+<div style={{ padding: spaces.space6 }} />
 ```
 
-<img src="https://firebasestorage.googleapis.com/v0/b/moko-app-bee21.appspot.com/o/svg%2FAl4A1QDj03y0M5fS7CeS.svg?alt=media">
-</br>
-<img src="https://firebasestorage.googleapis.com/v0/b/moko-app-bee21.appspot.com/o/gif%2FimvnuX3o6pd2DLv446ur.gif?alt=media">
+## colors
+
+Value for particular token is changing depend on the mode Light|Dark
+
+| Token name                | ☀️ Light Mode                                                     | 🌚 Dark Mode                                                      |
+| :------------------------ | :---------------------------------------------------------------- | :---------------------------------------------------------------- |
+| border                    | ![](https://via.placeholder.com/14/757575/?text=+) grayscale[500] | ![](https://via.placeholder.com/14/6E6E6E/?text=+) grayscale[600] |
+| divider                   | ![](https://via.placeholder.com/14/E3E3E3/?text=+) grayscale[100] | ![](https://via.placeholder.com/14/6E6E6E?text=+) grayscale[600]  |
+| error                     | ![](https://via.placeholder.com/14/D93311/?text=+) red[500]       | ![](https://via.placeholder.com/14/FF7C6B/?text=+) red[100]       |
+| errorContrast             | ![](https://via.placeholder.com/14/FFFFFF/?text=+) grayscale[0]   | ![](https://via.placeholder.com/14/111111/?text=+) grayscale[900] |
+| subtleFeedback            | ![](https://via.placeholder.com/14/FFFAE5/?text=+) yellow[50]     | ![](https://via.placeholder.com/14/3A352C/?text=+) yellow[800]    |
+| subtleFeedbackContrast    | ![](https://via.placeholder.com/14/111111/?text=+) grayscale[900] | ![](https://via.placeholder.com/14/F7C56E/?text=+) yellow[100]    |
+| caution                   | ![](https://via.placeholder.com/14/FFD000/?text=+) yellow[500]    | ![](https://via.placeholder.com/14/F7C56E/?text=+) yellow[100]    |
+| cautionContrast           | ![](https://via.placeholder.com/14/111111/?text=+) grayscale[900] | ![](https://via.placeholder.com/14/111111/?text=+) grayscale[900] |
+| success                   | ![](https://via.placeholder.com/14/268750/?text=+) green[500]     | ![](https://via.placeholder.com/14/77Cf9D/?text=+) green[100]     |
+| successContrast           | ![](https://via.placeholder.com/14/FFFFFF/?text=+) grayscale[0]   | ![](https://via.placeholder.com/14/111111/?text=+) grayscale[900] |
+| primaryTextColor          | ![](https://via.placeholder.com/14/111111/?text=+) grayscale[900] | ![](https://via.placeholder.com/14/FFFFFF/?text=+) grayscale[0]   |
+| secondaryTextColor        | ![](https://via.placeholder.com/14/6E6E6E/?text=+) grayscale[550] | ![](https://via.placeholder.com/14/B3B3B3/?text=+) grayscale[400] |
+| tertiaryTextColor         | ![](https://via.placeholder.com/14/B3B3B3/?text=+) grayscale[400] | ![](https://via.placeholder.com/14/6E6E6E/?text=+) grayscale[600] |
+| surface                   | ![](https://via.placeholder.com/14/FFFFFF/?text=+) grayscale[0]   | ![](https://via.placeholder.com/14/252525/?text=+) grayscale[800] |
+| surfaceVariant            | ![](https://via.placeholder.com/14/F0F0F0/?text=+) grayscale[25]  | ![](https://via.placeholder.com/14/2E2E2E/?text=+) grayscale[700] |
+| surfaceInteractive        | ![](https://via.placeholder.com/14/F8F8F8/?text=+) grayscale[50]  | ![](https://via.placeholder.com/14/2E2E2E/?text=+) grayscale[700] |
+| surfaceInteractivePressed | ![](https://via.placeholder.com/14/6E6E6E/?text=+) grayscale[600] | ![](https://via.placeholder.com/14/B3B3B3/?text=+) grayscale[400] |
+| surfaceDecorative         | ![](https://via.placeholder.com/14/E3E3E3/?text=+) grayscale[100] | ![](https://via.placeholder.com/14/2E2E2E/?text=+) grayscale[700] |
+| hintSurface               | ![](https://via.placeholder.com/14/252525/?text=+) grayscale[800] | ![](https://via.placeholder.com/14/6E6E6E/?text=+) grayscale[550] |
+| floatSurface              | ![](https://via.placeholder.com/14/FFFFFF/?text=+) grayscale[0]   | ![](https://via.placeholder.com/14/2E2E2E/?text=+) grayscale[700] |
+| pressedElement            | ![](https://via.placeholder.com/14/D5D5D5/?text=+) grayscale[200] | ![](https://via.placeholder.com/14/6E6E6E/?text=+) grayscale[600] |
+| notification              | ![](https://via.placeholder.com/14/E30D34/?text=+) ruby[500]      | ![](https://via.placeholder.com/14/FA6681/?text=+) ruby[100]      |
+| notificationContrast      | ![](https://via.placeholder.com/14/FFFFFF/?text=+) grayscale[0]   | ![](https://via.placeholder.com/14/111111/?text=+) grayscale[900] |
+| widgetBackground          | ![](https://via.placeholder.com/14/F8F8F8/?text=+) grayscale[50]  | ![](https://via.placeholder.com/14/111111/?text=+) grayscale[900] |
+| disabled                  | ![](https://via.placeholder.com/14/E3E3E3/?text=+) grayscale[100] | ![](https://via.placeholder.com/14/2E2E2E/?text=+) grayscale[700] |
+| disabledContrast          | ![](https://via.placeholder.com/14/6E6E6E/?text=+) grayscale[600] | ![](https://via.placeholder.com/14/757575/?text=+) grayscale[500] |
+| formIconcolor             | ![](https://via.placeholder.com/14/F8F8F8/?text=+) grayscale[50]  | ![](https://via.placeholder.com/14/111111/?text=+) grayscale[900] |
+
+## typography
+
+![N|Solid](https://cdn.livechat-static.com/api/file/lc/img/chat-widget-design-tokens/typography.svg)
+
+## spaces
+
+![N|Solid](https://cdn.livechat-static.com/api/file/lc/img/chat-widget-design-tokens/spaces.svg)
+
+## fontSizes
+
+![N|Solid](https://cdn.livechat-static.com/api/file/lc/img/chat-widget-design-tokens/fontsizes.svg)
+
+## borderRadiuses
+
+![N|Solid](https://cdn.livechat-static.com/api/file/lc/img/chat-widget-design-tokens/radiuses.svg)
+
+## boxShadows
+
+![N|Solid](https://cdn.livechat-static.com/api/file/lc/img/chat-widget-design-tokens/boxShadows.svg)
+
+## transitions
+
+![N|Solid](https://cdn.livechat-static.com/api/file/lc/img/chat-widget-design-tokens/transitions.gif)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

88365

increased by30.73%

Number of package files

6

increased by50%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

107

increased by181.58%

Worsened metrics

Dependency count

1

increased byInfinity%

Lines of code

1443

decreased by-21.79%

Dependency changes

• + Addedpolished@^3.4.1

• + Added@babel/runtime@7.26.0(transitive)

• + Addedpolished@3.7.2(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)