@elastic/eui 62.0.2 → 62.2.0

package/optimize/lib/components/toast/toast.js

@@ -15,26 +15,24 @@ var _react = _interopRequireDefault(require("react"));
 
 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) {
@@ -45,15 +43,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"
@@ -67,17 +68,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"
-      }));
+      });
     });
   }
 
@@ -85,12 +84,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",
@@ -100,11 +101,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);
 };

package/optimize/lib/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/optimize/lib/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/optimize/lib/components/token/token.js

@@ -5,68 +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 _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,
@@ -90,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,

package/optimize/lib/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/optimize/lib/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/optimize/lib/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/optimize/lib/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
   });

package/optimize/lib/services/{breakpoint.js → breakpoint/breakpoint.js}

@@ -9,7 +9,9 @@ exports.isWithinBreakpoints = isWithinBreakpoints;
 exports.isWithinMaxBreakpoint = isWithinMaxBreakpoint;
 exports.isWithinMinBreakpoint = isWithinMinBreakpoint;
 
-var _common = require("../components/common");
+var _common = require("../../components/common");
+
+var _breakpoint = require("../../themes/amsterdam/global_styling/variables/_breakpoint");
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -18,13 +20,7 @@ var _common = require("../components/common");
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var BREAKPOINTS = {
-  xl: 1200,
-  l: 992,
-  m: 768,
-  s: 575,
-  xs: 0
-};
+var BREAKPOINTS = _breakpoint.breakpoint;
 exports.BREAKPOINTS = BREAKPOINTS;
 var BREAKPOINT_KEYS = (0, _common.keysOf)(BREAKPOINTS);
 /**
@@ -42,7 +38,7 @@ exports.BREAKPOINT_KEYS = BREAKPOINT_KEYS;
 function getBreakpoint(width) {
   var breakpoints = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : BREAKPOINTS;
   // Find the breakpoint (key) whose value is <= windowWidth starting with largest first
-  return (0, _common.keysOf)(BREAKPOINTS).find(function (key) {
+  return BREAKPOINT_KEYS.find(function (key) {
     return breakpoints[key] <= width;
   });
 }

package/optimize/lib/services/breakpoint/currentEuiBreakpoint.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCurrentEuiBreakpoint = exports.CurrentEuiBreakpointProvider = exports.CurrentEuiBreakpointContext = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _theme = require("../theme");
+
+var _throttle = require("../throttle");
+
+var _breakpoint = require("./breakpoint");
+
+var _react2 = require("@emotion/react");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/*
+ * 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 CurrentEuiBreakpointContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+/**
+ * Top level provider (nested within EuiProvider) which provides a single
+ * resize listener that returns the current breakpoint based on window width
+ */
+
+exports.CurrentEuiBreakpointContext = CurrentEuiBreakpointContext;
+
+var CurrentEuiBreakpointProvider = function CurrentEuiBreakpointProvider(_ref) {
+  var children = _ref.children;
+
+  var _useEuiTheme = (0, _theme.useEuiTheme)(),
+      breakpoints = _useEuiTheme.euiTheme.breakpoint;
+
+  var _useState = (0, _react.useState)((typeof window === "undefined" ? "undefined" : (0, _typeof2.default)(window)) !== undefined ? (0, _breakpoint.getBreakpoint)(window.innerWidth, breakpoints) : undefined),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      currentBreakpoint = _useState2[0],
+      setCurrentBreakpoint = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    var onWindowResize = (0, _throttle.throttle)(function () {
+      setCurrentBreakpoint((0, _breakpoint.getBreakpoint)(window.innerWidth, breakpoints));
+    }, 50);
+    window.addEventListener('resize', onWindowResize);
+    return function () {
+      return window.removeEventListener('resize', onWindowResize);
+    };
+  }, [breakpoints]);
+  return (0, _react2.jsx)(CurrentEuiBreakpointContext.Provider, {
+    value: currentBreakpoint
+  }, children);
+};
+/**
+ * Hook util / syntactical sugar
+ */
+
+
+exports.CurrentEuiBreakpointProvider = CurrentEuiBreakpointProvider;
+
+var useCurrentEuiBreakpoint = function useCurrentEuiBreakpoint() {
+  var currentBreakpoint = (0, _react.useContext)(CurrentEuiBreakpointContext);
+  return currentBreakpoint;
+};
+
+exports.useCurrentEuiBreakpoint = useCurrentEuiBreakpoint;