@elastic/eui 62.0.2 → 62.2.0

package/test-env/components/toast/toast.js

@@ -17,26 +17,24 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _common = require("../common");
+var _services = require("../../services");
 
 var _accessibility = require("../accessibility");
 
+var _button = require("../button");
+
 var _i18n = require("../i18n");
 
 var _icon = require("../icon");
 
 var _text = require("../text");
 
+var _toast = require("./toast.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["title", "color", "iconType", "onClose", "children", "className"];
-var colorToClassNameMap = {
-  primary: 'euiToast--primary',
-  success: 'euiToast--success',
-  warning: 'euiToast--warning',
-  danger: 'euiToast--danger'
-};
-var COLORS = (0, _common.keysOf)(colorToClassNameMap);
+var COLORS = ['primary', 'success', 'warning', 'danger'];
 exports.COLORS = COLORS;
 
 var EuiToast = function EuiToast(_ref) {
@@ -47,15 +45,18 @@ var EuiToast = function EuiToast(_ref) {
       children = _ref.children,
       className = _ref.className,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classes = (0, _classnames.default)('euiToast', color ? colorToClassNameMap[color] : null, className);
-  var headerClasses = (0, _classnames.default)('euiToastHeader', {
-    'euiToastHeader--withBody': children
-  });
+  var euiTheme = (0, _services.useEuiTheme)();
+  var baseStyles = (0, _toast.euiToastStyles)(euiTheme);
+  var baseCss = [baseStyles.euiToast, color && baseStyles[color]];
+  var bodyStyles = (0, _toast.euiToastBodyStyles)();
+  var headerStyles = (0, _toast.euiToastHeaderStyles)(euiTheme);
+  var headerCss = [headerStyles.euiToastHeader, children && headerStyles.withBody];
+  var classes = (0, _classnames.default)('euiToast', className);
   var headerIcon;
 
   if (iconType) {
     headerIcon = (0, _react2.jsx)(_icon.EuiIcon, {
-      className: "euiToastHeader__icon",
+      css: headerStyles.euiToastHeader__icon,
       type: iconType,
       size: "m",
       "aria-hidden": "true"
@@ -69,17 +70,15 @@ var EuiToast = function EuiToast(_ref) {
       token: "euiToast.dismissToast",
       default: "Dismiss toast"
     }, function (dismissToast) {
-      return (0, _react2.jsx)("button", {
-        type: "button",
-        className: "euiToast__closeButton",
+      return (0, _react2.jsx)(_button.EuiButtonIcon, {
+        css: baseStyles.euiToast__closeButton,
+        iconType: "cross",
+        color: "text",
+        size: "xs",
         "aria-label": dismissToast,
         onClick: onClose,
         "data-test-subj": "toastCloseButton"
-      }, (0, _react2.jsx)(_icon.EuiIcon, {
-        type: "cross",
-        size: "m",
-        "aria-hidden": "true"
-      }));
+      });
     });
   }
 
@@ -87,12 +86,14 @@ var EuiToast = function EuiToast(_ref) {
 
   if (children) {
     optionalBody = (0, _react2.jsx)(_text.EuiText, {
+      css: bodyStyles.euiToastBody,
       size: "s",
-      className: "euiToastBody"
+      "data-test-subj": "euiToastBody"
     }, children);
   }
 
   return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: baseCss,
     className: classes
   }, rest), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", null, (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiToast.newNotification",
@@ -102,11 +103,12 @@ var EuiToast = function EuiToast(_ref) {
     default: "Notification"
   }, function (notification) {
     return (0, _react2.jsx)("div", {
-      className: headerClasses,
+      css: headerCss,
       "aria-label": notification,
       "data-test-subj": "euiToastHeader"
     }, headerIcon, (0, _react2.jsx)("span", {
-      className: "euiToastHeader__title"
+      css: headerStyles.euiToastHeader__title,
+      "data-test-subj": "euiToastHeader__title"
     }, title));
   }), closeButton, optionalBody);
 };
@@ -114,7 +116,7 @@ var EuiToast = function EuiToast(_ref) {
 exports.EuiToast = EuiToast;
 EuiToast.propTypes = {
   title: _propTypes.default.node,
-  color: _propTypes.default.oneOf(["primary", "success", "warning", "danger"]),
+  color: _propTypes.default.any,
   iconType: _propTypes.default.oneOfType([_propTypes.default.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.default.string.isRequired, _propTypes.default.elementType.isRequired]),
   onClose: _propTypes.default.func,
   className: _propTypes.default.string,

package/test-env/components/toast/toast.styles.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiToastStyles = exports.euiToastHeaderStyles = exports.euiToastBodyStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+var _amsterdam = require("../../themes/amsterdam");
+
+var _title = require("../title/title.styles");
+
+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)."; }
+
+var euiToastStyles = function euiToastStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    // Base
+    euiToast: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";", (0, _amsterdam.euiShadowLarge)(euiThemeContext), ";position:relative;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base), ";", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.base), ";background-color:", euiTheme.colors.emptyShade, ";", (0, _global_styling.logicalCSS)('width', '100%'), ";&:hover,&:focus{[class*='euiToast__closeButton']{opacity:1;}};label:euiToast;"),
+    // Elements
+    euiToast__closeButton: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('top', euiTheme.size.base), ";", (0, _global_styling.logicalCSS)('right', euiTheme.size.base), ";;label:euiToast__closeButton;"),
+    // Variants
+    primary: /*#__PURE__*/(0, _react.css)("border-top:2px solid ", euiTheme.colors.primary, ";;label:primary;"),
+    success: /*#__PURE__*/(0, _react.css)("border-top:2px solid ", euiTheme.colors.success, ";;label:success;"),
+    warning: /*#__PURE__*/(0, _react.css)("border-top:2px solid ", euiTheme.colors.warning, ";;label:warning;"),
+    danger: /*#__PURE__*/(0, _react.css)("border-top:2px solid ", euiTheme.colors.danger, ";;label:danger;")
+  };
+};
+
+exports.euiToastStyles = euiToastStyles;
+
+var euiToastHeaderStyles = function euiToastHeaderStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    // Base
+    euiToastHeader: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-right', euiTheme.size.l), ";display:flex;align-items:baseline;>*+*{", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.s), ";};label:euiToastHeader;"),
+    // Elements
+    euiToastHeader__icon: /*#__PURE__*/(0, _react.css)("flex:0 0 auto;fill:", euiTheme.colors.title, ";transform:translateY(2px);;label:euiToastHeader__icon;"),
+    euiToastHeader__title: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xs'), ";font-weight:", euiTheme.font.weight.bold, ";;label:euiToastHeader__title;"),
+    // Variants
+    withBody: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";;label:withBody;")
+  };
+};
+
+exports.euiToastHeaderStyles = euiToastHeaderStyles;
+
+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__
+};
+
+var euiToastBodyStyles = function euiToastBodyStyles() {
+  return {
+    // Base
+    euiToastBody: _ref
+  };
+};
+
+exports.euiToastBodyStyles = euiToastBodyStyles;

package/test-env/components/token/index.js

@@ -12,20 +12,22 @@ Object.defineProperty(exports, "EuiToken", {
 Object.defineProperty(exports, "TOKEN_COLORS", {
   enumerable: true,
   get: function get() {
-    return _token.COLORS;
+    return _token_types.COLORS;
   }
 });
 Object.defineProperty(exports, "TOKEN_SHAPES", {
   enumerable: true,
   get: function get() {
-    return _token.SHAPES;
+    return _token_types.SHAPES;
   }
 });
 Object.defineProperty(exports, "TOKEN_SIZES", {
   enumerable: true,
   get: function get() {
-    return _token.SIZES;
+    return _token_types.SIZES;
   }
 });
 
+var _token_types = require("./token_types");
+
 var _token = require("./token");

package/test-env/components/token/token.js

@@ -5,70 +5,41 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SIZES = exports.SHAPES = exports.FILLS = exports.EuiToken = exports.COLORS = void 0;
+exports.EuiToken = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _defaults = _interopRequireDefault(require("lodash/defaults"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _common = require("../common");
-
 var _services = require("../../services");
 
 var _icon = require("../icon");
 
 var _token_map = require("./token_map");
 
+var _token_types = require("./token_types");
+
+var _token = require("./token.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["iconType", "color", "fill", "shape", "size", "style", "className", "title", "aria-label", "aria-labelledby", "aria-describedby"];
-var sizeToClassMap = {
-  xs: 'euiToken--xsmall',
-  s: 'euiToken--small',
-  m: 'euiToken--medium',
-  l: 'euiToken--large'
-};
-var SIZES = (0, _common.keysOf)(sizeToClassMap);
-exports.SIZES = SIZES;
-var shapeToClassMap = {
-  circle: 'euiToken--circle',
-  square: 'euiToken--square',
-  rectangle: 'euiToken--rectangle'
-};
-var SHAPES = (0, _common.keysOf)(shapeToClassMap);
-exports.SHAPES = SHAPES;
-var fillToClassMap = {
-  none: null,
-  light: 'euiToken--light',
-  dark: 'euiToken--dark'
-};
-var FILLS = (0, _common.keysOf)(fillToClassMap);
-exports.FILLS = FILLS;
-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'
+
+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) { (0, _defineProperty2.default)(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; }
+
+var isTokenColor = function isTokenColor(color) {
+  return _token_types.COLORS.includes(color);
 };
-var COLORS = (0, _common.keysOf)(colorToClassMap);
-exports.COLORS = COLORS;
 
 var EuiToken = function EuiToken(_ref) {
   var iconType = _ref.iconType,
@@ -92,48 +63,49 @@ 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.TOKEN_MAP) {
-    var tokenDisplay = _token_map.TOKEN_MAP[iconType];
-    finalDisplay = (0, _defaults.default)(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 = _services.isColorDark.apply(void 0, (0, _toConsumableArray2.default)((0, _services.hexToRgb)(finalColor))) ? '#FFFFFF' : '#000000';
-    }
+  var tokenDefaults = typeof iconType === 'string' && iconType in _token_map.TOKEN_MAP ? _token_map.TOKEN_MAP[iconType] : {};
+  var finalColor = color || tokenDefaults.color || 'gray';
+  var finalShape = shape || tokenDefaults.shape || 'circle';
+  var finalFill = fill || 'light';
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _token.euiTokenStyles)(euiTheme, finalFill);
+  var cssStyles = [styles.euiToken, styles[finalShape], styles[finalFill], styles[size]];
+  var finalStyle = style;
+
+  if (isTokenColor(finalColor)) {
+    cssStyles = [].concat((0, _toConsumableArray2.default)(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((0, _toConsumableArray2.default)(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 = _services.isColorDark.apply(void 0, (0, _toConsumableArray2.default)((0, _services.hexToRgb)(finalColor)));
+
+    var lightOrDarkColor = isFinalColorDark ? '#FFFFFF' : '#000000';
+    cssStyles = [].concat((0, _toConsumableArray2.default)(cssStyles), [styles.customColor]);
+    finalFill = 'dark';
+    finalStyle = _objectSpread({
+      color: lightOrDarkColor,
+      backgroundColor: finalColor
+    }, style);
   }
 
-  var classes = (0, _classnames.default)('euiToken', colorClass, shapeToClassMap[finalShape], fillToClassMap[finalFill], sizeToClassMap[size], className);
+  var classes = (0, _classnames.default)('euiToken', className);
   return (0, _react2.jsx)("span", (0, _extends2.default)({
     className: classes,
-    style: style
+    css: cssStyles,
+    style: finalStyle
   }, rest), (0, _react2.jsx)(_icon.EuiIcon, {
     type: iconType,
     size: finalSize,
@@ -144,45 +116,4 @@ var EuiToken = function EuiToken(_ref) {
   }));
 };
 
-exports.EuiToken = EuiToken;
-EuiToken.propTypes = {
-  className: _propTypes.default.string,
-  "aria-label": _propTypes.default.string,
-  "data-test-subj": _propTypes.default.string,
-
-  /**
-     * An EUI icon type
-     */
-  iconType: _propTypes.default.oneOfType([_propTypes.default.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.default.string.isRequired, _propTypes.default.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.default.oneOfType([_propTypes.default.oneOf(["euiColorVis0", "euiColorVis1", "euiColorVis2", "euiColorVis3", "euiColorVis4", "euiColorVis5", "euiColorVis6", "euiColorVis7", "euiColorVis8", "euiColorVis9", "gray"]).isRequired, _propTypes.default.string.isRequired]),
-
-  /**
-     * Outer shape surrounding the icon
-     * Default: `circle`
-     */
-  shape: _propTypes.default.oneOf(["circle", "square", "rectangle"]),
-
-  /**
-     * `light` for lightened color with border, `dark` for solid, or `none`
-     * Default: `light`
-     */
-  fill: _propTypes.default.oneOf(["dark", "light", "none"]),
-
-  /**
-     * Size of the token
-     */
-  size: _propTypes.default.oneOf(["xs", "s", "m", "l"]),
-
-  /**
-     * The icon's title. Required for accessibility
-     */
-  title: _propTypes.default.string,
-  "aria-labelledby": _propTypes.default.string,
-  "aria-describedby": _propTypes.default.string
-};
+exports.EuiToken = EuiToken;

package/test-env/components/token/token.styles.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiTokenStyles = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _react = require("@emotion/react");
+
+var _chromaJs = _interopRequireDefault(require("chroma-js"));
+
+var _global_styling = require("../../global_styling");
+
+var _services = require("../../services");
+
+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)."; }
+
+var visColors = (0, _services.euiPaletteColorBlind)();
+var visColorsBehindText = (0, _services.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 ? (0, _services.shade)(iconColor, 0.7) : (0, _services.tint)(iconColor, 0.9);
+  var lightColor = (0, _services.makeHighContrastColor)(iconColor)(backgroundLightColor);
+  var boxShadowColor = isDarkMode ? (0, _services.shade)(iconColor, 0.6) : (0, _services.tint)(iconColor, 0.7);
+  var darkColor = _services.isColorDark.apply(void 0, (0, _toConsumableArray2.default)((0, _chromaJs.default)(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__
+};
+
+var euiTokenStyles = function euiTokenStyles(_ref2, fill) {
+  var euiTheme = _ref2.euiTheme,
+      colorMode = _ref2.colorMode;
+  return {
+    // Base
+    euiToken: /*#__PURE__*/(0, _react.css)("display:inline-flex;align-items:center;justify-content:center;svg{", (0, _global_styling.logicalCSS)('height', '100%'), " margin:auto;};label:euiToken;"),
+    // Shapes
+    circle: _ref,
+    square: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.small, ";;label:square;"),
+    rectangle: /*#__PURE__*/(0, _react.css)("box-sizing:content-box;border-radius:", euiTheme.border.radius.small, ";;label:rectangle;"),
+    // Sizes
+    xs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.s, euiTheme.size.s), ";&[class*='-square']{border-radius:calc(", euiTheme.border.radius.small, " / 2);}&[class*='-rectangle']{", (0, _global_styling.logicalCSS)('padding-vertical', '1px'), ";", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), ";border-radius:calc(", euiTheme.border.radius.small, " / 2);};label:xs;"),
+    s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.base, euiTheme.size.base), ";&[class*='-rectangle']{", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), ";};label:s;"),
+    m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.l, euiTheme.size.l), ";&[class*='-rectangle']{", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), ";};label:m;"),
+    l: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.xl, euiTheme.size.xl), ";&[class*='-rectangle']{", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), ";};label:l;"),
+    // Colors
+    euiColorVis0: /*#__PURE__*/(0, _react.css)(getTokenColor(euiTheme, colorMode, fill, 0), ";label:euiColorVis0;"),
+    euiColorVis1: /*#__PURE__*/(0, _react.css)(getTokenColor(euiTheme, colorMode, fill, 1), ";label:euiColorVis1;"),
+    euiColorVis2: /*#__PURE__*/(0, _react.css)(getTokenColor(euiTheme, colorMode, fill, 2), ";label:euiColorVis2;"),
+    euiColorVis3: /*#__PURE__*/(0, _react.css)(getTokenColor(euiTheme, colorMode, fill, 3), ";label:euiColorVis3;"),
+    euiColorVis4: /*#__PURE__*/(0, _react.css)(getTokenColor(euiTheme, colorMode, fill, 4), ";label:euiColorVis4;"),
+    euiColorVis5: /*#__PURE__*/(0, _react.css)(getTokenColor(euiTheme, colorMode, fill, 5), ";label:euiColorVis5;"),
+    euiColorVis6: /*#__PURE__*/(0, _react.css)(getTokenColor(euiTheme, colorMode, fill, 6), ";label:euiColorVis6;"),
+    euiColorVis7: /*#__PURE__*/(0, _react.css)(getTokenColor(euiTheme, colorMode, fill, 7), ";label:euiColorVis7;"),
+    euiColorVis8: /*#__PURE__*/(0, _react.css)(getTokenColor(euiTheme, colorMode, fill, 8), ";label:euiColorVis8;"),
+    euiColorVis9: /*#__PURE__*/(0, _react.css)(getTokenColor(euiTheme, colorMode, fill, 9), ";label:euiColorVis9;"),
+    gray: /*#__PURE__*/(0, _react.css)(getTokenColor(euiTheme, colorMode, fill, 'gray'), ";label:gray;"),
+    customColor: /*#__PURE__*/(0, _react.css)(";label:customColor;"),
+    // Fills
+    light: /*#__PURE__*/(0, _react.css)(";label:light;"),
+    dark: /*#__PURE__*/(0, _react.css)(";label:dark;"),
+    none: /*#__PURE__*/(0, _react.css)(";label:none;")
+  };
+};
+
+exports.euiTokenStyles = euiTokenStyles;

package/test-env/components/token/token_map.js

@@ -84,9 +84,8 @@ var TOKEN_MAP = {
     color: 'euiColorVis0'
   },
   tokenFile: {
-    shape: 'rectangle',
-    color: 'gray',
-    fill: 'dark'
+    shape: 'square',
+    color: 'euiColorVis2'
   },
   tokenFlattened: {
     shape: 'square',
@@ -193,9 +192,8 @@ var TOKEN_MAP = {
     color: 'euiColorVis3'
   },
   tokenRepo: {
-    shape: 'rectangle',
-    color: 'euiColorVis1',
-    fill: 'dark'
+    shape: 'square',
+    color: 'euiColorVis1'
   },
   tokenSearchType: {
     shape: 'square',
@@ -214,9 +212,8 @@ var TOKEN_MAP = {
     color: 'euiColorVis0'
   },
   tokenSymbol: {
-    shape: 'rectangle',
-    color: 'euiColorVis0',
-    fill: 'dark'
+    shape: 'square',
+    color: 'euiColorVis0'
   },
   tokenTag: {
     shape: 'square',

package/test-env/components/token/token_types.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SIZES = exports.SHAPES = exports.FILLS = exports.COLORS = void 0;
+
+/*
+ * 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.
+ */
+var SIZES = ['xs', 's', 'm', 'l'];
+exports.SIZES = SIZES;
+var SHAPES = ['circle', 'square', 'rectangle'];
+exports.SHAPES = SHAPES;
+var FILLS = ['light', 'dark', 'none'];
+exports.FILLS = FILLS;
+var COLORS = ['euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9', 'gray'];
+exports.COLORS = COLORS;

package/test-env/global_styling/reset/global_styles.js

@@ -55,7 +55,7 @@ var EuiGlobalStyles = function EuiGlobalStyles(_ref) {
    * Final styles
    */
 
-  var styles = /*#__PURE__*/(0, _react2.css)(_reset.resetStyles, " html{", scrollbarStyles, " ", fontReset, " text-size-adjust:100%;font-kerning:normal;height:100%;background-color:", colors.body, ";color:", colors.text, ";}code,pre,kbd,samp{font-family:", font.familyCode, ";}input,textarea,select{", fontReset, ";}button{font-family:", font.family, ";}em{font-style:italic;}strong{font-weight:", font.weight.bold, ";}*:focus{", (0, _mixins.euiFocusRing)(euiTheme), ";}::selection{background:", (0, _color.transparentize)(colors.primary, colorMode === 'LIGHT' ? 0.1 : 0.2), ";}a{color:", colors.primaryText, ";&,&:hover,&:focus{text-decoration:none;}};label:styles;");
+  var styles = /*#__PURE__*/(0, _react2.css)(_reset.resetStyles, " html{", scrollbarStyles, " ", fontReset, " text-size-adjust:100%;font-kerning:normal;height:100%;background-color:", colors.body, ";color:", colors.text, ";}code,pre,kbd,samp{font-family:", font.familyCode, ";}input,textarea,select{", fontReset, ";}button{font-family:", font.family, ";}em{font-style:italic;}strong{font-weight:", font.weight.bold, ";}*:focus{", (0, _mixins.euiFocusRing)(euiTheme), ";}::selection{background:", (0, _color.transparentize)(colors.primary, colorMode === 'LIGHT' ? 0.1 : 0.2), ";}a{color:", colors.primaryText, ";&,&:hover,&:focus{text-decoration:none;}}.euiBody-hasPortalContent{position:relative;};label:styles;");
   return (0, _react2.jsx)(_react2.Global, {
     styles: styles
   });