@elastic/eui 62.0.3 → 63.0.0

package/es/components/toast/global_toast_list_item.js

@@ -11,22 +11,27 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import { cloneElement } from 'react';
-import PropTypes from "prop-types";
 import classNames from 'classnames';
+import PropTypes from "prop-types";
+import { useEuiTheme } from '../../services';
+import { cloneElementWithCss } from '../../services/theme/clone_element';
+import { euiGlobalToastListItemStyles } from './global_toast_list.styles';
 export var EuiGlobalToastListItem = function EuiGlobalToastListItem(_ref) {
   var children = _ref.children,
+      className = _ref.className,
       isDismissed = _ref.isDismissed;
+  var euiTheme = useEuiTheme();
 
   if (!children) {
     return null;
   }
 
-  var classes = classNames('euiGlobalToastListItem', children.props.className, {
-    'euiGlobalToastListItem-isDismissed': isDismissed
-  });
-  return /*#__PURE__*/cloneElement(children, _objectSpread(_objectSpread({}, children.props), {
-    className: classes
+  var styles = euiGlobalToastListItemStyles(euiTheme);
+  var cssStyles = [styles.euiGlobalToastListItem, isDismissed && styles.dismissed];
+  var classes = classNames('euiGlobalToastListItem', children.props.className, className);
+  return cloneElementWithCss(children, _objectSpread(_objectSpread({}, children.props), {
+    className: classes,
+    css: cssStyles
   }));
 };
 EuiGlobalToastListItem.propTypes = {

package/es/components/toast/toast.js

@@ -16,19 +16,15 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { keysOf } from '../common';
+import { useEuiTheme } from '../../services';
 import { EuiScreenReaderOnly } from '../accessibility';
+import { EuiButtonIcon } from '../button';
 import { EuiI18n } from '../i18n';
 import { EuiIcon } from '../icon';
 import { EuiText } from '../text';
+import { euiToastStyles, euiToastBodyStyles, euiToastHeaderStyles } from './toast.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var colorToClassNameMap = {
-  primary: 'euiToast--primary',
-  success: 'euiToast--success',
-  warning: 'euiToast--warning',
-  danger: 'euiToast--danger'
-};
-export var COLORS = keysOf(colorToClassNameMap);
+export var COLORS = ['primary', 'success', 'warning', 'danger'];
 export var EuiToast = function EuiToast(_ref) {
   var title = _ref.title,
       color = _ref.color,
@@ -38,15 +34,18 @@ export var EuiToast = function EuiToast(_ref) {
       className = _ref.className,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var classes = classNames('euiToast', color ? colorToClassNameMap[color] : null, className);
-  var headerClasses = classNames('euiToastHeader', {
-    'euiToastHeader--withBody': children
-  });
+  var euiTheme = useEuiTheme();
+  var baseStyles = euiToastStyles(euiTheme);
+  var baseCss = [baseStyles.euiToast, color && baseStyles[color]];
+  var bodyStyles = euiToastBodyStyles();
+  var headerStyles = euiToastHeaderStyles(euiTheme);
+  var headerCss = [headerStyles.euiToastHeader, children && headerStyles.withBody];
+  var classes = classNames('euiToast', className);
   var headerIcon;
 
   if (iconType) {
     headerIcon = ___EmotionJSX(EuiIcon, {
-      className: "euiToastHeader__icon",
+      css: headerStyles.euiToastHeader__icon,
       type: iconType,
       size: "m",
       "aria-hidden": "true"
@@ -60,17 +59,15 @@ export var EuiToast = function EuiToast(_ref) {
       token: "euiToast.dismissToast",
       default: "Dismiss toast"
     }, function (dismissToast) {
-      return ___EmotionJSX("button", {
-        type: "button",
-        className: "euiToast__closeButton",
+      return ___EmotionJSX(EuiButtonIcon, {
+        css: baseStyles.euiToast__closeButton,
+        iconType: "cross",
+        color: "text",
+        size: "xs",
         "aria-label": dismissToast,
         onClick: onClose,
         "data-test-subj": "toastCloseButton"
-      }, ___EmotionJSX(EuiIcon, {
-        type: "cross",
-        size: "m",
-        "aria-hidden": "true"
-      }));
+      });
     });
   }
 
@@ -78,12 +75,14 @@ export var EuiToast = function EuiToast(_ref) {
 
   if (children) {
     optionalBody = ___EmotionJSX(EuiText, {
+      css: bodyStyles.euiToastBody,
       size: "s",
-      className: "euiToastBody"
+      "data-test-subj": "euiToastBody"
     }, children);
   }
 
   return ___EmotionJSX("div", _extends({
+    css: baseCss,
     className: classes
   }, rest), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", null, ___EmotionJSX(EuiI18n, {
     token: "euiToast.newNotification",
@@ -93,17 +92,18 @@ export var EuiToast = function EuiToast(_ref) {
     default: "Notification"
   }, function (notification) {
     return ___EmotionJSX("div", {
-      className: headerClasses,
+      css: headerCss,
       "aria-label": notification,
       "data-test-subj": "euiToastHeader"
     }, headerIcon, ___EmotionJSX("span", {
-      className: "euiToastHeader__title"
+      css: headerStyles.euiToastHeader__title,
+      "data-test-subj": "euiToastHeader__title"
     }, title));
   }), closeButton, optionalBody);
 };
 EuiToast.propTypes = {
   title: PropTypes.node,
-  color: PropTypes.oneOf(["primary", "success", "warning", "danger"]),
+  color: PropTypes.any,
   iconType: PropTypes.oneOfType([PropTypes.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "alert", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "asterisk", "auditbeatApp", "beaker", "bell", "bellSlash", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "codeApp", "color", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crossInACircleFilled", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "discoverApp", "document", "documentEdit", "documentation", "documents", "dot", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "eql", "eraser", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "inputOutput", "inspect", "invert", "ip", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "mobile", "monitoringApp", "moon", "namespace", "nested", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipelineApp", "play", "playFilled", "plus", "plusInCircle", "plusInCircleFilled", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "snowflake", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spacesApp", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelionApp", "timeRefresh", "timeslider", "training", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDenseVector", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable"]).isRequired, PropTypes.string.isRequired, PropTypes.elementType.isRequired]),
   onClose: PropTypes.func,
   className: PropTypes.string,

package/es/components/toast/toast.styles.js

@@ -0,0 +1,55 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { css } from '@emotion/react';
+import { logicalCSS } from '../../global_styling';
+import { euiShadowLarge } from '../../themes/amsterdam';
+import { euiTitle } from '../title/title.styles';
+export var euiToastStyles = function euiToastStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    // Base
+    euiToast: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";", euiShadowLarge(euiThemeContext), ";position:relative;", logicalCSS('padding-horizontal', euiTheme.size.base), ";", logicalCSS('padding-vertical', euiTheme.size.base), ";background-color:", euiTheme.colors.emptyShade, ";", logicalCSS('width', '100%'), ";&:hover,&:focus{[class*='euiToast__closeButton']{opacity:1;}};label:euiToast;"),
+    // Elements
+    euiToast__closeButton: /*#__PURE__*/css("position:absolute;", logicalCSS('top', euiTheme.size.base), ";", logicalCSS('right', euiTheme.size.base), ";;label:euiToast__closeButton;"),
+    // Variants
+    primary: /*#__PURE__*/css("border-top:2px solid ", euiTheme.colors.primary, ";;label:primary;"),
+    success: /*#__PURE__*/css("border-top:2px solid ", euiTheme.colors.success, ";;label:success;"),
+    warning: /*#__PURE__*/css("border-top:2px solid ", euiTheme.colors.warning, ";;label:warning;"),
+    danger: /*#__PURE__*/css("border-top:2px solid ", euiTheme.colors.danger, ";;label:danger;")
+  };
+};
+export var euiToastHeaderStyles = function euiToastHeaderStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    // Base
+    euiToastHeader: /*#__PURE__*/css(logicalCSS('padding-right', euiTheme.size.l), ";display:flex;align-items:baseline;>*+*{", logicalCSS('margin-left', euiTheme.size.s), ";};label:euiToastHeader;"),
+    // Elements
+    euiToastHeader__icon: /*#__PURE__*/css("flex:0 0 auto;fill:", euiTheme.colors.title, ";transform:translateY(2px);;label:euiToastHeader__icon;"),
+    euiToastHeader__title: /*#__PURE__*/css(euiTitle(euiThemeContext, 'xs'), ";font-weight:", euiTheme.font.weight.bold, ";;label:euiToastHeader__title;"),
+    // Variants
+    withBody: /*#__PURE__*/css(logicalCSS('margin-bottom', euiTheme.size.s), ";;label:withBody;")
+  };
+};
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1xv63y1-euiToastBody",
+  styles: "word-wrap:break-word;label:euiToastBody;"
+} : {
+  name: "1xv63y1-euiToastBody",
+  styles: "word-wrap:break-word;label:euiToastBody;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiToastBodyStyles = function euiToastBodyStyles() {
+  return {
+    // Base
+    euiToastBody: _ref
+  };
+};

package/es/components/token/index.js

@@ -5,4 +5,5 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-export { EuiToken, SIZES as TOKEN_SIZES, SHAPES as TOKEN_SHAPES, COLORS as TOKEN_COLORS } from './token';
+export { SIZES as TOKEN_SIZES, SHAPES as TOKEN_SHAPES, COLORS as TOKEN_COLORS } from './token_types';
+export { EuiToken } from './token';

package/es/components/token/token.js

@@ -2,6 +2,12 @@ var _excluded = ["iconType", "color", "fill", "shape", "size", "style", "classNa
 
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -26,47 +32,18 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * Side Public License, v 1.
  */
 import React from 'react';
-import PropTypes from "prop-types";
-import defaults from 'lodash/defaults';
 import classNames from 'classnames';
-import { keysOf } from '../common';
-import { isColorDark, hexToRgb } from '../../services';
+import { useEuiTheme, isColorDark, hexToRgb } from '../../services';
 import { EuiIcon } from '../icon';
 import { TOKEN_MAP } from './token_map';
+import { COLORS } from './token_types';
+import { euiTokenStyles } from './token.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var sizeToClassMap = {
-  xs: 'euiToken--xsmall',
-  s: 'euiToken--small',
-  m: 'euiToken--medium',
-  l: 'euiToken--large'
-};
-export var SIZES = keysOf(sizeToClassMap);
-var shapeToClassMap = {
-  circle: 'euiToken--circle',
-  square: 'euiToken--square',
-  rectangle: 'euiToken--rectangle'
-};
-export var SHAPES = keysOf(shapeToClassMap);
-var fillToClassMap = {
-  none: null,
-  light: 'euiToken--light',
-  dark: 'euiToken--dark'
-};
-export var FILLS = keysOf(fillToClassMap);
-var colorToClassMap = {
-  euiColorVis0: 'euiToken--euiColorVis0',
-  euiColorVis1: 'euiToken--euiColorVis1',
-  euiColorVis2: 'euiToken--euiColorVis2',
-  euiColorVis3: 'euiToken--euiColorVis3',
-  euiColorVis4: 'euiToken--euiColorVis4',
-  euiColorVis5: 'euiToken--euiColorVis5',
-  euiColorVis6: 'euiToken--euiColorVis6',
-  euiColorVis7: 'euiToken--euiColorVis7',
-  euiColorVis8: 'euiToken--euiColorVis8',
-  euiColorVis9: 'euiToken--euiColorVis9',
-  gray: 'euiToken--gray'
+
+var isTokenColor = function isTokenColor(color) {
+  return COLORS.includes(color);
 };
-export var COLORS = keysOf(colorToClassMap);
+
 export var EuiToken = function EuiToken(_ref) {
   var iconType = _ref.iconType,
       color = _ref.color,
@@ -90,48 +67,48 @@ export var EuiToken = function EuiToken(_ref) {
 
   if (typeof iconType === 'string' && iconType.indexOf('token') === 0 && size === 's') {
     finalSize = 'm';
-  }
-
-  var currentDisplay = {
-    color: color,
-    fill: fill,
-    shape: shape
-  };
-  var finalDisplay; // If the iconType passed is one of the prefab token types,
+  } // If the iconType passed is one of the prefab token types,
   // grab its properties
 
-  if (typeof iconType === 'string' && iconType in TOKEN_MAP) {
-    var tokenDisplay = TOKEN_MAP[iconType];
-    finalDisplay = defaults(currentDisplay, tokenDisplay);
-  } else {
-    finalDisplay = currentDisplay;
-  }
 
-  var finalColor = finalDisplay.color || 'gray';
-  var finalShape = finalDisplay.shape || 'circle';
-  var finalFill = finalDisplay.fill || 'light'; // Color can be a named space via euiColorVis
-
-  var colorClass;
-
-  if (finalColor in colorToClassMap) {
-    colorClass = colorToClassMap[finalColor];
-  } // Or it can be a string which adds inline styles for the
-  else {
-    // text color if fill='none' or
-    if (finalFill === 'none') {
-      style.color = finalColor;
-    } // full background color if fill='dark' and overrides fill='light' with dark
-    else {
-      finalFill = 'dark';
-      style.backgroundColor = finalColor;
-      style.color = isColorDark.apply(void 0, _toConsumableArray(hexToRgb(finalColor))) ? '#FFFFFF' : '#000000';
-    }
+  var tokenDefaults = typeof iconType === 'string' && iconType in TOKEN_MAP ? TOKEN_MAP[iconType] : {};
+  var finalColor = color || tokenDefaults.color || 'gray';
+  var finalShape = shape || tokenDefaults.shape || 'circle';
+  var finalFill = fill || 'light';
+  var euiTheme = useEuiTheme();
+  var styles = euiTokenStyles(euiTheme, finalFill);
+  var cssStyles = [styles.euiToken, styles[finalShape], styles[finalFill], styles[size]];
+  var finalStyle = style;
+
+  if (isTokenColor(finalColor)) {
+    cssStyles = [].concat(_toConsumableArray(cssStyles), [styles[finalColor]]);
+  } else if (finalFill === 'none') {
+    // When a custom HEX color is passed and the token doesn't have any fill (no background),
+    // the icon gets that passed color
+    cssStyles = [].concat(_toConsumableArray(cssStyles), [styles.customColor]);
+    finalStyle = _objectSpread({
+      color: finalColor
+    }, style);
+  } else {
+    // When a custom HEX color is passed and the token has a fill (light or dark),
+    // the background gets the custom color and the icon gets white or black based on the passed color
+    // The fill='light' (lightened background) will always be overridden by fill='dark' (opaque background)
+    // to better handle custom colors
+    var isFinalColorDark = isColorDark.apply(void 0, _toConsumableArray(hexToRgb(finalColor)));
+    var lightOrDarkColor = isFinalColorDark ? '#FFFFFF' : '#000000';
+    cssStyles = [].concat(_toConsumableArray(cssStyles), [styles.customColor]);
+    finalFill = 'dark';
+    finalStyle = _objectSpread({
+      color: lightOrDarkColor,
+      backgroundColor: finalColor
+    }, style);
   }
 
-  var classes = classNames('euiToken', colorClass, shapeToClassMap[finalShape], fillToClassMap[finalFill], sizeToClassMap[size], className);
+  var classes = classNames('euiToken', className);
   return ___EmotionJSX("span", _extends({
     className: classes,
-    style: style
+    css: cssStyles,
+    style: finalStyle
   }, rest), ___EmotionJSX(EuiIcon, {
     type: iconType,
     size: finalSize,
@@ -140,45 +117,4 @@ export var EuiToken = function EuiToken(_ref) {
     "aria-labelledby": ariaLabelledby,
     "aria-describedby": ariaDescribedby
   }));
-};
-EuiToken.propTypes = {
-  className: PropTypes.string,
-  "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string,
-
-  /**
-     * An EUI icon type
-     */
-  iconType: PropTypes.oneOfType([PropTypes.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "alert", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "asterisk", "auditbeatApp", "beaker", "bell", "bellSlash", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "codeApp", "color", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crossInACircleFilled", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "discoverApp", "document", "documentEdit", "documentation", "documents", "dot", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "eql", "eraser", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "inputOutput", "inspect", "invert", "ip", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "mobile", "monitoringApp", "moon", "namespace", "nested", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipelineApp", "play", "playFilled", "plus", "plusInCircle", "plusInCircleFilled", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "snowflake", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spacesApp", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelionApp", "timeRefresh", "timeslider", "training", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDenseVector", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable"]).isRequired, PropTypes.string.isRequired, PropTypes.elementType.isRequired]).isRequired,
-
-  /**
-     * For best results use one of the vis color names (or 'gray').
-     * Or supply your own color (can be used with dark or no fill only).
-     * Default: `gray`
-     */
-  color: PropTypes.oneOfType([PropTypes.oneOf(["euiColorVis0", "euiColorVis1", "euiColorVis2", "euiColorVis3", "euiColorVis4", "euiColorVis5", "euiColorVis6", "euiColorVis7", "euiColorVis8", "euiColorVis9", "gray"]).isRequired, PropTypes.string.isRequired]),
-
-  /**
-     * Outer shape surrounding the icon
-     * Default: `circle`
-     */
-  shape: PropTypes.oneOf(["circle", "square", "rectangle"]),
-
-  /**
-     * `light` for lightened color with border, `dark` for solid, or `none`
-     * Default: `light`
-     */
-  fill: PropTypes.oneOf(["dark", "light", "none"]),
-
-  /**
-     * Size of the token
-     */
-  size: PropTypes.oneOf(["xs", "s", "m", "l"]),
-
-  /**
-     * The icon's title. Required for accessibility
-     */
-  title: PropTypes.string,
-  "aria-labelledby": PropTypes.string,
-  "aria-describedby": PropTypes.string
 };

package/es/components/token/token.styles.js

@@ -0,0 +1,93 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+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 _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { css } from '@emotion/react';
+import chroma from 'chroma-js';
+import { logicalCSS, logicalSizeCSS } from '../../global_styling';
+import { euiPaletteColorBlind, euiPaletteColorBlindBehindText, makeHighContrastColor, isColorDark, tint, shade } from '../../services';
+var visColors = euiPaletteColorBlind();
+var visColorsBehindText = euiPaletteColorBlindBehindText();
+
+var getTokenColor = function getTokenColor(euiTheme, colorMode, fill, color) {
+  var isVizColor = typeof color === 'number';
+  var iconColor = isVizColor ? visColors[color] : euiTheme.colors.darkShade;
+  var isDarkMode = colorMode === 'DARK';
+  var backgroundDarkColor = isVizColor ? visColorsBehindText[color] : euiTheme.colors.darkShade;
+  var backgroundLightColor = isDarkMode ? shade(iconColor, 0.7) : tint(iconColor, 0.9);
+  var lightColor = makeHighContrastColor(iconColor)(backgroundLightColor);
+  var boxShadowColor = isDarkMode ? shade(iconColor, 0.6) : tint(iconColor, 0.7);
+  var darkColor = isColorDark.apply(void 0, _toConsumableArray(chroma(backgroundDarkColor).rgb())) ? euiTheme.colors.ghost : euiTheme.colors.ink;
+
+  switch (fill) {
+    case 'none':
+      return "\n        // Without a background, the fill color should be the graphic color\n        color: ".concat(iconColor, ";\n      ");
+
+    case 'light':
+      return "\n        color: ".concat(lightColor, ";\n        background-color: ").concat(backgroundLightColor, ";\n        box-shadow: inset 0 0 0 1px ").concat(boxShadowColor, ";\n      ");
+
+    case 'dark':
+      return "\n        color: ".concat(darkColor, ";\n        background-color: ").concat(backgroundDarkColor, ";\n      ");
+  }
+};
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1ab5xb2-circle",
+  styles: "border-radius:50%;label:circle;"
+} : {
+  name: "1ab5xb2-circle",
+  styles: "border-radius:50%;label:circle;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiTokenStyles = function euiTokenStyles(_ref2, fill) {
+  var euiTheme = _ref2.euiTheme,
+      colorMode = _ref2.colorMode;
+  return {
+    // Base
+    euiToken: /*#__PURE__*/css("display:inline-flex;align-items:center;justify-content:center;svg{", logicalCSS('height', '100%'), " margin:auto;};label:euiToken;"),
+    // Shapes
+    circle: _ref,
+    square: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.small, ";;label:square;"),
+    rectangle: /*#__PURE__*/css("box-sizing:content-box;border-radius:", euiTheme.border.radius.small, ";;label:rectangle;"),
+    // Sizes
+    xs: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.s, euiTheme.size.s), ";&[class*='-square']{border-radius:calc(", euiTheme.border.radius.small, " / 2);}&[class*='-rectangle']{", logicalCSS('padding-vertical', '1px'), ";", logicalCSS('padding-horizontal', euiTheme.size.xs), ";border-radius:calc(", euiTheme.border.radius.small, " / 2);};label:xs;"),
+    s: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.base, euiTheme.size.base), ";&[class*='-rectangle']{", logicalCSS('padding-horizontal', euiTheme.size.xs), ";};label:s;"),
+    m: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.l, euiTheme.size.l), ";&[class*='-rectangle']{", logicalCSS('padding-horizontal', euiTheme.size.s), ";};label:m;"),
+    l: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.xl, euiTheme.size.xl), ";&[class*='-rectangle']{", logicalCSS('padding-horizontal', euiTheme.size.s), ";};label:l;"),
+    // Colors
+    euiColorVis0: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 0), ";label:euiColorVis0;"),
+    euiColorVis1: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 1), ";label:euiColorVis1;"),
+    euiColorVis2: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 2), ";label:euiColorVis2;"),
+    euiColorVis3: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 3), ";label:euiColorVis3;"),
+    euiColorVis4: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 4), ";label:euiColorVis4;"),
+    euiColorVis5: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 5), ";label:euiColorVis5;"),
+    euiColorVis6: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 6), ";label:euiColorVis6;"),
+    euiColorVis7: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 7), ";label:euiColorVis7;"),
+    euiColorVis8: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 8), ";label:euiColorVis8;"),
+    euiColorVis9: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 9), ";label:euiColorVis9;"),
+    gray: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 'gray'), ";label:gray;"),
+    customColor: /*#__PURE__*/css(";label:customColor;"),
+    // Fills
+    light: /*#__PURE__*/css(";label:light;"),
+    dark: /*#__PURE__*/css(";label:dark;"),
+    none: /*#__PURE__*/css(";label:none;")
+  };
+};

package/es/components/token/token_map.js

@@ -77,9 +77,8 @@ export var TOKEN_MAP = {
     color: 'euiColorVis0'
   },
   tokenFile: {
-    shape: 'rectangle',
-    color: 'gray',
-    fill: 'dark'
+    shape: 'square',
+    color: 'euiColorVis2'
   },
   tokenFlattened: {
     shape: 'square',
@@ -186,9 +185,8 @@ export var TOKEN_MAP = {
     color: 'euiColorVis3'
   },
   tokenRepo: {
-    shape: 'rectangle',
-    color: 'euiColorVis1',
-    fill: 'dark'
+    shape: 'square',
+    color: 'euiColorVis1'
   },
   tokenSearchType: {
     shape: 'square',
@@ -207,9 +205,8 @@ export var TOKEN_MAP = {
     color: 'euiColorVis0'
   },
   tokenSymbol: {
-    shape: 'rectangle',
-    color: 'euiColorVis0',
-    fill: 'dark'
+    shape: 'square',
+    color: 'euiColorVis0'
   },
   tokenTag: {
     shape: 'square',

package/es/components/token/token_types.js

@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+export var SIZES = ['xs', 's', 'm', 'l'];
+export var SHAPES = ['circle', 'square', 'rectangle'];
+export var FILLS = ['light', 'dark', 'none'];
+export var COLORS = ['euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9', 'gray'];

package/es/global_styling/functions/logicals.js

@@ -119,7 +119,7 @@ export var logicalStyle = function logicalStyle(property, value) {
   var camelCasedProperty = logicals[property].replace(/-\w/g, function (str) {
     return str.charAt(1).toUpperCase();
   });
-  return _defineProperty({}, camelCasedProperty, "".concat(value));
+  return _defineProperty({}, camelCasedProperty, value);
 };
 /**
  *