@elastic/eui 105.0.0 → 106.0.0

package/optimize/es/components/selectable/selectable_templates/selectable_template_sitewide.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "options", "popoverProps", "popoverTitle", "popoverFooter", "searchProps", "listProps", "isLoading", "popoverButton", "popoverButtonBreakpoints"],
+var _excluded = ["children", "className", "options", "popoverProps", "popoverTitle", "popoverFooter", "searchProps", "listProps", "isLoading", "popoverButton", "popoverButtonBreakpoints", "colorModes"],
   _excluded2 = ["closePopover", "panelRef", "width"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -14,21 +14,20 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Side Public License, v 1.
  */
 
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useMemo, useCallback, useContext } from 'react';
 import classNames from 'classnames';
-import { useCombinedRefs, useCurrentEuiBreakpoint, useEuiMemoizedStyles } from '../../../services';
+import { COLOR_MODES_STANDARD, EuiNestedThemeContext, EuiThemeProvider, useCombinedRefs, useCurrentEuiBreakpoint, useEuiMemoizedStyles, useEuiTheme, useEuiThemeRefreshVariant } from '../../../services';
 import { ENTER } from '../../../services/keys';
 import { useEuiI18n, EuiI18n } from '../../i18n';
-import { EuiPopoverTitle, EuiPopoverFooter } from '../../popover';
-import { EuiPopover } from '../../popover/popover';
 import { EuiLoadingSpinner } from '../../loading';
-import { EuiSpacer } from '../../spacer';
 import { EuiSelectable } from '../selectable';
 import { EuiSelectableMessage } from '../selectable_message';
 import { euiSelectableTemplateSitewideFormatOptions, euiSelectableTemplateSitewideRenderOptions } from './selectable_template_sitewide_option';
 import { euiSelectableTemplateSitewideStyles } from './selectable_template_sitewide.styles';
+import { EuiSelectableTemplateSitewidePopover } from './selectable_template_sitewide_popover';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewide(_ref) {
+  var _colorModes$search, _colorModes$popover;
   var children = _ref.children,
     className = _ref.className,
     options = _ref.options,
@@ -40,7 +39,30 @@ export var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewid
     isLoading = _ref.isLoading,
     popoverButton = _ref.popoverButton,
     popoverButtonBreakpoints = _ref.popoverButtonBreakpoints,
+    _ref$colorModes = _ref.colorModes,
+    colorModes = _ref$colorModes === void 0 ? {
+      search: 'default',
+      popover: 'default'
+    } : _ref$colorModes,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var _useEuiTheme = useEuiTheme(),
+    colorMode = _useEuiTheme.colorMode;
+  var isRefreshVariant = useEuiThemeRefreshVariant('formVariant');
+  var _useContext = useContext(EuiNestedThemeContext),
+    hasDifferentColorFromGlobalTheme = _useContext.hasDifferentColorFromGlobalTheme;
+  var _searchColorMode = colorModes === null || colorModes === void 0 || (_colorModes$search = colorModes.search) === null || _colorModes$search === void 0 ? void 0 : _colorModes$search.toLowerCase();
+  var _popoverColorMode = colorModes === null || colorModes === void 0 || (_colorModes$popover = colorModes.popover) === null || _colorModes$popover === void 0 ? void 0 : _colorModes$popover.toLowerCase();
+  var searchColorMode = useMemo(function () {
+    var isStaticTheme = [COLOR_MODES_STANDARD.light.toLowerCase(), COLOR_MODES_STANDARD.dark.toLowerCase()].includes(_searchColorMode);
+    return isStaticTheme ? _searchColorMode : _searchColorMode === 'inverse' ? colorMode === COLOR_MODES_STANDARD.dark ? COLOR_MODES_STANDARD.light : COLOR_MODES_STANDARD.dark : colorMode;
+  }, [colorMode, _searchColorMode]);
+  var popoverColorMode = useMemo(function () {
+    var isStaticTheme = [COLOR_MODES_STANDARD.light.toLowerCase(), COLOR_MODES_STANDARD.dark.toLowerCase()].includes(_popoverColorMode);
+    var inverseColorMode = colorMode === COLOR_MODES_STANDARD.dark ? COLOR_MODES_STANDARD.light : COLOR_MODES_STANDARD.dark;
+    var globalColorMode = hasDifferentColorFromGlobalTheme ? colorMode === COLOR_MODES_STANDARD.dark ? COLOR_MODES_STANDARD.light : COLOR_MODES_STANDARD.dark : colorMode;
+    return isStaticTheme ? _popoverColorMode : _popoverColorMode === 'inverse' ? inverseColorMode : _popoverColorMode === 'global' ? globalColorMode : colorMode;
+  }, [hasDifferentColorFromGlobalTheme, colorMode, _popoverColorMode]);
+
   /**
    * i18n text
    */
@@ -194,24 +216,27 @@ export var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewid
   }, rest, {
     searchable: true
   }), function (list, search) {
-    return ___EmotionJSX(EuiPopover, _extends({
-      panelPaddingSize: "none",
+    var _search = isRefreshVariant && !popoverTrigger ? ___EmotionJSX(EuiThemeProvider, {
+      colorMode: searchColorMode
+    }, search) : search;
+
+    // uses standalone subcomponent to ensure scoped style/theme context
+    var popover = ___EmotionJSX(EuiSelectableTemplateSitewidePopover, _extends({
       isOpen: popoverIsOpen,
-      ownFocus: !!popoverTrigger,
-      display: popoverTrigger ? 'inline-block' : 'block'
-    }, popoverRest, {
+      trigger: popoverTrigger,
+      search: _search,
+      list: list,
+      title: popoverTitle,
+      footer: popoverFooter,
+      width: popoverWidth,
       panelRef: setPanelRef,
-      button: popoverTrigger ? popoverTrigger : search,
       closePopover: closePopover
-    }), ___EmotionJSX("div", {
-      style: {
-        width: popoverWidth,
-        maxWidth: '100%'
-      }
-    }, popoverTitle || popoverTrigger ? ___EmotionJSX(EuiPopoverTitle, {
-      paddingSize: "s"
-    }, popoverTitle, popoverTitle && search && ___EmotionJSX(EuiSpacer, null), search) : undefined, list, popoverFooter && ___EmotionJSX(EuiPopoverFooter, {
-      paddingSize: "s"
-    }, popoverFooter)));
+    }, popoverRest));
+    return isRefreshVariant ? ___EmotionJSX(EuiThemeProvider, {
+      wrapperProps: {
+        cloneElement: true
+      },
+      colorMode: popoverColorMode
+    }, popover) : popover;
   });
 };

package/optimize/es/components/selectable/selectable_templates/selectable_template_sitewide.styles.js

@@ -33,8 +33,8 @@ export var euiSelectableTemplateSitewideStyles = function euiSelectableTemplateS
     euiSelectableTemplateSitewide: _ref2,
     // Override EuiSelectable's default item underline
     euiSelectableTemplateSitewide__listItem: _ref,
-    euiSelectableTemplateSitewide__optionMetasList: /*#__PURE__*/css("display:block;", logicalCSS('margin-top', euiTheme.size.xs), " ", euiFontSize(euiThemeContext, 'xs'), " color:", euiTheme.colors.subduedText, ";;label:euiSelectableTemplateSitewide__optionMetasList;"),
-    euiSelectableTemplateSitewide__optionMeta: /*#__PURE__*/css("&:not(:last-of-type)::after{content:'\u2022';", logicalCSS('margin-horizontal', euiTheme.size.xs), " color:", euiTheme.colors.subduedText, ";};label:euiSelectableTemplateSitewide__optionMeta;"),
+    euiSelectableTemplateSitewide__optionMetasList: /*#__PURE__*/css("display:block;", logicalCSS('margin-top', euiTheme.size.xs), " ", euiFontSize(euiThemeContext, 'xs'), " color:", euiTheme.colors.textSubdued, ";;label:euiSelectableTemplateSitewide__optionMetasList;"),
+    euiSelectableTemplateSitewide__optionMeta: /*#__PURE__*/css("&:not(:last-of-type)::after{content:'\u2022';", logicalCSS('margin-horizontal', euiTheme.size.xs), " color:", euiTheme.colors.textSubdued, ";};label:euiSelectableTemplateSitewide__optionMeta;"),
     metaTypes: {
       fontWeight: "\n        font-weight: ".concat(euiTheme.font.weight.medium, ";\n      "),
       application: /*#__PURE__*/css("color:", makeHighContrastColor(visColors[1])(euiTheme), ";;label:application;"),
@@ -44,4 +44,10 @@ export var euiSelectableTemplateSitewideStyles = function euiSelectableTemplateS
       platform: /*#__PURE__*/css("color:", makeHighContrastColor(visColors[5])(euiTheme), ";;label:platform;")
     }
   };
+};
+export var euiSelectableTemplateSitewidePopoverStyles = function euiSelectableTemplateSitewidePopoverStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiSelectableTemplateSitewide__popover: /*#__PURE__*/css("color:", euiTheme.colors.textParagraph, ";;label:euiSelectableTemplateSitewide__popover;")
+  };
 };

package/optimize/es/components/selectable/selectable_templates/selectable_template_sitewide_popover.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["trigger", "search", "list", "title", "footer", "width", "isOpen", "panelRef", "closePopover"];
+/*
+ * 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 React from 'react';
+import { useEuiMemoizedStyles } from '../../../services';
+import { EuiPopover, EuiPopoverFooter, EuiPopoverTitle } from '../../popover';
+import { EuiSpacer } from '../../spacer';
+import { euiSelectableTemplateSitewidePopoverStyles } from './selectable_template_sitewide.styles';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiSelectableTemplateSitewidePopover = function EuiSelectableTemplateSitewidePopover(_ref) {
+  var trigger = _ref.trigger,
+    search = _ref.search,
+    list = _ref.list,
+    title = _ref.title,
+    footer = _ref.footer,
+    width = _ref.width,
+    isOpen = _ref.isOpen,
+    panelRef = _ref.panelRef,
+    closePopover = _ref.closePopover,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var styles = useEuiMemoizedStyles(euiSelectableTemplateSitewidePopoverStyles);
+  return ___EmotionJSX(EuiPopover, _extends({
+    panelPaddingSize: "none",
+    isOpen: isOpen,
+    ownFocus: !!trigger,
+    display: trigger ? 'inline-block' : 'block'
+  }, rest, {
+    panelRef: panelRef,
+    button: trigger ? trigger : search,
+    closePopover: closePopover,
+    panelProps: {
+      css: styles.euiSelectableTemplateSitewide__popover
+    }
+  }), ___EmotionJSX("div", {
+    style: {
+      width: width,
+      maxWidth: '100%'
+    }
+  }, title || trigger ? ___EmotionJSX(EuiPopoverTitle, {
+    paddingSize: "s"
+  }, title, title && search && ___EmotionJSX(EuiSpacer, null), search) : undefined, list, footer && ___EmotionJSX(EuiPopoverFooter, {
+    paddingSize: "s"
+  }, footer)));
+};

package/optimize/es/global_styling/mixins/_button.js

@@ -187,7 +187,7 @@ export var euiButtonSizeMap = function euiButtonSizeMap(euiThemeContext) {
       minWidth: euiTheme.base * (isRefreshVariant ? 6 : 7),
       height: euiTheme.size.l,
       radius: euiTheme.border.radius.small,
-      fontScale: 'xs'
+      fontScale: isRefreshVariant ? 's' : 'xs'
     },
     s: {
       minWidth: euiTheme.base * (isRefreshVariant ? 6 : 7),

package/optimize/es/services/color/eui_palettes.js

@@ -26,6 +26,8 @@ var euiPalette = function euiPalette(colors, steps) {
   return colorPalette(colors, steps, diverge, categorical);
 };
 /**
+ * For usage in React use the `useEuiPaletteColorBlind` hook instead.
+ *
  * NOTE: These functions rely on base vis colors of the theme which are provided via a global
  * singleton instance `EUI_VIS_COLOR_STORE` that's updated by the EuiProvider on theme change.
  * Make sure the function is recalled on theme change to retrieve theme-related colors.
@@ -92,6 +94,8 @@ export var euiPaletteColorBlind = function euiPaletteColorBlind() {
 };
 
 /**
+ * For usage in React use the `useEuiPaletteColorBlindBehindText` hook instead.
+ *
  * Color blind palette with text is meant for use when text is applied on top of the color.
  * It increases the brightness of the color to give the text more contrast.
  *
@@ -150,6 +154,8 @@ export var euiPaletteForDarkBackground = function euiPaletteForDarkBackground()
 };
 
 /**
+ * For usage in React use the `useEuiPaletteForStatus` hook instead.
+ *
  * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
@@ -167,6 +173,8 @@ export var euiPaletteForStatus = function euiPaletteForStatus(steps) {
 };
 
 /**
+ * For usage in React use the `useEuiPaletteForTemperature` hook instead.
+ *
  * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
@@ -188,6 +196,8 @@ export var euiPaletteForTemperature = function euiPaletteForTemperature(steps) {
 };
 
 /**
+ * For usage in React use the `useEuiPaletteComplementary` hook instead.
+ *
  * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
@@ -205,6 +215,8 @@ export var euiPaletteComplementary = function euiPaletteComplementary(steps) {
 };
 
 /**
+ * For usage in React use the `useEuiPaletteRed` hook instead.
+ *
  * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
@@ -219,6 +231,8 @@ export var euiPaletteRed = function euiPaletteRed(steps) {
 };
 
 /**
+ * For usage in React use the `useEuiPaletteGreen` hook instead.
+ *
  * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
@@ -233,6 +247,8 @@ export var euiPaletteGreen = function euiPaletteGreen(steps) {
 };
 
 /**
+ * For usage in React use the `useEuiPaletteSkyBlue` hook instead.
+ *
  * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
@@ -247,6 +263,8 @@ export var euiPaletteSkyBlue = function euiPaletteSkyBlue(steps) {
 };
 
 /**
+ * For usage in React use the `useEuiPaletteYellow` hook instead.
+ *
  * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
@@ -261,6 +279,8 @@ export var euiPaletteYellow = function euiPaletteYellow(steps) {
 };
 
 /**
+ * For usage in React use the `useEuiPaletteOrange` hook instead.
+ *
  * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
@@ -275,6 +295,8 @@ export var euiPaletteOrange = function euiPaletteOrange(steps) {
 };
 
 /**
+ * For usage in React use the `useEuiPaletteCool` hook instead.
+ *
  * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
@@ -291,6 +313,8 @@ export var euiPaletteCool = function euiPaletteCool(steps) {
 };
 
 /**
+ * For usage in React use the `useEuiPaletteWarm` hook instead.
+ *
  * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
@@ -305,6 +329,8 @@ export var euiPaletteWarm = function euiPaletteWarm(steps) {
 };
 
 /**
+ * For usage in React use the `useEuiPaletteGray` hook instead.
+ *
  * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */

package/optimize/es/services/color/vis_color_store.js

@@ -10,4 +10,4 @@ import { EuiVisColorStore } from '@elastic/eui-theme-common';
 import { colorVis } from '@elastic/eui-theme-borealis';
 
 // initialsetup of Vis color storage with default colors
-export var EUI_VIS_COLOR_STORE = EuiVisColorStore.getInstance(colorVis, true);
+export var EUI_VIS_COLOR_STORE = EuiVisColorStore.getInstance(colorVis, false);

package/optimize/es/services/color/visualization_colors.js

@@ -9,5 +9,9 @@
 // Array of color-blind safe colors to use in visualizations or other
 // spots that need a large range of varied, qualitative colors.
 import { euiPaletteColorBlind } from '../../services/color/eui_palettes';
+
+/** @deprecated - use the data vis colors on `euiTheme.colors.vis` instead */
 export var VISUALIZATION_COLORS = euiPaletteColorBlind();
+
+/** @deprecated - use the data vis colors on `euiTheme.colors.vis` instead */
 export var DEFAULT_VISUALIZATION_COLOR = VISUALIZATION_COLORS[1];

package/optimize/es/services/theme/provider.js

@@ -86,14 +86,16 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
     modifications: modifications
   });
   var isParentTheme = useRef(isGlobalTheme ? prevSystemKey.current === DEFAULTS.system.key && colorMode === DEFAULTS.colorMode && highContrastMode === DEFAULTS.highContrastMode && !_modifications : prevSystemKey.current === parentSystem.key && colorMode === parentColorMode && highContrastMode === parentHighContrastMode && isEqual(parentModifications, modifications));
-  var updateVisColorStore = useCallback(function (theme) {
-    var _theme$flags$hasVisCo, _theme$flags;
-    EUI_VIS_COLOR_STORE.setVisColors(theme.colors.vis, (_theme$flags$hasVisCo = (_theme$flags = theme.flags) === null || _theme$flags === void 0 ? void 0 : _theme$flags.hasVisColorAdjustment) !== null && _theme$flags$hasVisCo !== void 0 ? _theme$flags$hasVisCo : true);
+  var updateVisColorStore = useCallback(function (theme, isGlobalTheme) {
+    if (isGlobalTheme) {
+      var _theme$flags$hasVisCo, _theme$flags;
+      EUI_VIS_COLOR_STORE.setVisColors(theme.colors.vis, (_theme$flags$hasVisCo = (_theme$flags = theme.flags) === null || _theme$flags === void 0 ? void 0 : _theme$flags.hasVisColorAdjustment) !== null && _theme$flags$hasVisCo !== void 0 ? _theme$flags$hasVisCo : true);
+    }
   }, []);
   var getInitialTheme = function getInitialTheme() {
     var theme = getComputed(system, buildTheme(modificationsWithHighContrast, "_".concat(system.key)), colorMode, highContrastMode);
     setTimeout(function () {
-      updateVisColorStore(theme);
+      updateVisColorStore(theme, isGlobalTheme);
     });
     return theme;
   };
@@ -108,9 +110,11 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
       setSystem(newSystem);
       prevSystemKey.current = newSystem.key;
       isParentTheme.current = false;
-      updateVisColorStore(theme);
     }
   }, [_system, parentSystem, theme, updateVisColorStore]);
+  useEffect(function () {
+    updateVisColorStore(theme, isGlobalTheme);
+  }, [theme, colorMode, isGlobalTheme, updateVisColorStore]);
   useEffect(function () {
     var newModifications = mergeDeep(parentModifications, _modifications);
     if (!isEqual(prevModifications.current, newModifications)) {
@@ -134,12 +138,15 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
   }, [highContrastMode]);
   useEffect(function () {
     if (!isParentTheme.current) {
-      /* Enables recomputation of component colors when flags are overridden on the provider 
+      /* Enables recomputation of component colors when flags are overridden on the provider
       by adding the respective key to modifications to trigger a recomputation. */
       // TODO: remove once visual refresh is completed and flags are obsolete
       var flagsToRecompute = [{
         flag: 'buttonVariant',
         componentKey: 'buttons'
+      }, {
+        flag: 'formVariant',
+        componentKey: 'forms'
       }];
       var keys = {};
       var forceRecomputeComponents = flagsToRecompute.some(function (item) {

package/optimize/es/themes/amsterdam/global_styling/variables/_colors.js

@@ -384,6 +384,8 @@ export var border_colors = {
       lightestShade = _ref121[0];
     return shade(lightestShade, 0.4);
   }, ['colors.lightestShade']),
+  borderInteractiveFormsHoverPlain: 'transparent',
+  borderInteractiveFormsHoverDanger: 'transparent',
   borderStrongPrimary: computed(function (_ref122) {
     var _ref123 = _slicedToArray(_ref122, 1),
       primary = _ref123[0];
@@ -676,6 +678,8 @@ export var dark_border_colors = {
       lightestShade = _ref225[0];
     return tint(lightestShade, 0.31);
   }, ['colors.lightestShade']),
+  borderInteractiveFormsHoverPlain: 'transparent',
+  borderInteractiveFormsHoverDanger: 'transparent',
   borderStrongPrimary: computed(function (_ref226) {
     var _ref227 = _slicedToArray(_ref226, 1),
       primary = _ref227[0];
@@ -774,11 +778,12 @@ export var colors = {
   ink: '#000000',
   plainLight: '#FFFFFF',
   plainDark: '#000000',
-  severity: severityColors,
   LIGHT: _objectSpread(_objectSpread({}, light_colors), {}, {
-    vis: colorVisLight
+    vis: colorVisLight,
+    severity: severityColors
   }),
   DARK: _objectSpread(_objectSpread({}, dark_colors_ams), {}, {
-    vis: colorVisDark
+    vis: colorVisDark,
+    severity: severityColors
   })
 };

package/optimize/es/themes/amsterdam/global_styling/variables/_forms.js

@@ -40,6 +40,7 @@ var _forms = {
     var background = tint(primary, 0.8);
     return tint(background, 0.7);
   }, ['colors.primary']),
+  backgroundDropping: 'transparent',
   prependBackground: computed(function (_ref11) {
     var _ref12 = _slicedToArray(_ref11, 1),
       lightShade = _ref12[0];
@@ -51,99 +52,141 @@ var _forms = {
     var color = darken(lightShade, 4);
     return transparentize(color, 0.1);
   }, ['colors.lightShade']),
-  borderAutofilled: computed(function (_ref15) {
+  borderDisabled: computed(function (_ref15) {
     var _ref16 = _slicedToArray(_ref15, 1),
-      primaryText = _ref16[0];
+      lightShade = _ref16[0];
+    var color = darken(lightShade, 4);
+    return transparentize(color, 0.1);
+  }, ['colors.lightShade']),
+  borderFocused: computed(function (_ref17) {
+    var _ref18 = _slicedToArray(_ref17, 1),
+      primary = _ref18[0];
+    return primary;
+  }, ['colors.primary']),
+  borderInvalid: computed(function (_ref19) {
+    var _ref20 = _slicedToArray(_ref19, 1),
+      danger = _ref20[0];
+    return danger;
+  }, ['colors.danger']),
+  borderHovered: computed(function (_ref21) {
+    var _ref22 = _slicedToArray(_ref21, 1),
+      lightShade = _ref22[0];
+    var color = darken(lightShade, 4);
+    return transparentize(color, 0.1);
+  }, ['colors.lightShade']),
+  borderInvalidHovered: computed(function (_ref23) {
+    var _ref24 = _slicedToArray(_ref23, 1),
+      danger = _ref24[0];
+    return danger;
+  }, ['colors.danger']),
+  borderAutofilled: computed(function (_ref25) {
+    var _ref26 = _slicedToArray(_ref25, 1),
+      primaryText = _ref26[0];
     return transparentize(primaryText, 0.2);
   }, ['colors.primaryText']),
-  controlBorder: computed(function (_ref17) {
-    var _ref18 = _slicedToArray(_ref17, 1),
-      lightestShade = _ref18[0];
+  borderAutofilledHovered: computed(function (_ref27) {
+    var _ref28 = _slicedToArray(_ref27, 1),
+      primaryText = _ref28[0];
+    return transparentize(primaryText, 0.2);
+  }, ['colors.primaryText']),
+  clearButtonBackground: computed(function (_ref29) {
+    var _ref30 = _slicedToArray(_ref29, 1),
+      mediumShade = _ref30[0];
+    return mediumShade;
+  }, ['colors.mediumShade']),
+  controlBorder: computed(function (_ref31) {
+    var _ref32 = _slicedToArray(_ref31, 1),
+      lightestShade = _ref32[0];
     return shade(lightestShade, 0.4);
   }, ['colors.lightestShade']),
-  controlBorderSelected: computed(function (_ref19) {
-    var _ref20 = _slicedToArray(_ref19, 1),
-      lightestShade = _ref20[0];
+  controlBorderSelected: computed(function (_ref33) {
+    var _ref34 = _slicedToArray(_ref33, 1),
+      lightestShade = _ref34[0];
     return shade(lightestShade, 0.4);
   }, ['colors.lightestShade']),
-  controlBorderDisabled: computed(function (_ref21) {
-    var _ref22 = _slicedToArray(_ref21, 1),
-      lightestShade = _ref22[0];
+  controlBorderDisabled: computed(function (_ref35) {
+    var _ref36 = _slicedToArray(_ref35, 1),
+      lightestShade = _ref36[0];
     return shade(lightestShade, 0.4);
   }, ['colors.lightestShade']),
-  controlBackgroundUnselected: computed(function (_ref23) {
-    var _ref24 = _slicedToArray(_ref23, 1),
-      emptyShade = _ref24[0];
+  controlBackgroundUnselected: computed(function (_ref37) {
+    var _ref38 = _slicedToArray(_ref37, 1),
+      emptyShade = _ref38[0];
     return emptyShade;
   }, ['colors.emptyShade']),
-  controlBackgroundDisabled: computed(function (_ref25) {
-    var _ref26 = _slicedToArray(_ref25, 1),
-      lightShade = _ref26[0];
+  controlBackgroundDisabled: computed(function (_ref39) {
+    var _ref40 = _slicedToArray(_ref39, 1),
+      lightShade = _ref40[0];
     return lightShade;
   }, ['colors.lightShade']),
-  colorHasPlaceholder: computed(function (_ref27) {
-    var _ref28 = _slicedToArray(_ref27, 1),
-      subduedText = _ref28[0];
+  colorHasPlaceholder: computed(function (_ref41) {
+    var _ref42 = _slicedToArray(_ref41, 1),
+      subduedText = _ref42[0];
     return tint(subduedText, 0.08);
   }, ['colors.subduedText']),
-  colorDisabled: computed(function (_ref29) {
-    var _ref30 = _slicedToArray(_ref29, 1),
-      mediumShade = _ref30[0];
+  colorDisabled: computed(function (_ref43) {
+    var _ref44 = _slicedToArray(_ref43, 1),
+      mediumShade = _ref44[0];
     return mediumShade;
   }, ['colors.mediumShade']),
-  iconDisabled: computed(function (_ref31) {
-    var _ref32 = _slicedToArray(_ref31, 1),
-      darkShade = _ref32[0];
+  iconDisabled: computed(function (_ref45) {
+    var _ref46 = _slicedToArray(_ref45, 1),
+      darkShade = _ref46[0];
     return darkShade;
   }, ['colors.darkShade'])
 };
 var _dark_forms = _objectSpread(_objectSpread({}, _forms), {}, {
-  background: computed(function (_ref33) {
-    var _ref34 = _slicedToArray(_ref33, 1),
-      lightestShade = _ref34[0];
+  background: computed(function (_ref47) {
+    var _ref48 = _slicedToArray(_ref47, 1),
+      lightestShade = _ref48[0];
     return shade(lightestShade, 0.4);
   }, ['colors.lightestShade']),
-  backgroundFocused: computed(function (_ref35) {
-    var _ref36 = _slicedToArray(_ref35, 1),
-      emptyShade = _ref36[0];
+  backgroundFocused: computed(function (_ref49) {
+    var _ref50 = _slicedToArray(_ref49, 1),
+      emptyShade = _ref50[0];
     return shade(emptyShade, 0.4);
   }, ['colors.emptyShade']),
-  backgroundAutofilled: computed(function (_ref37) {
-    var _ref38 = _slicedToArray(_ref37, 1),
-      primary = _ref38[0];
+  backgroundAutofilled: computed(function (_ref51) {
+    var _ref52 = _slicedToArray(_ref51, 1),
+      primary = _ref52[0];
     var background = shade(primary, 0.7);
     return shade(background, 0.5);
   }, ['colors.primary']),
-  prependBackground: computed(function (_ref39) {
-    var _ref40 = _slicedToArray(_ref39, 1),
-      lightShade = _ref40[0];
+  prependBackground: computed(function (_ref53) {
+    var _ref54 = _slicedToArray(_ref53, 1),
+      lightShade = _ref54[0];
     return shade(lightShade, 0.15);
   }, ['colors.lightShade']),
-  border: computed(function (_ref41) {
-    var _ref42 = _slicedToArray(_ref41, 1),
-      ghost = _ref42[0];
+  border: computed(function (_ref55) {
+    var _ref56 = _slicedToArray(_ref55, 1),
+      ghost = _ref56[0];
     return transparentize(ghost, 0.1);
   }, ['colors.ghost']),
-  controlBorder: computed(function (_ref43) {
-    var _ref44 = _slicedToArray(_ref43, 1),
-      lightestShade = _ref44[0];
+  clearButtonBackground: computed(function (_ref57) {
+    var _ref58 = _slicedToArray(_ref57, 1),
+      darkShade = _ref58[0];
+    return darkShade;
+  }, ['colors.darkShade']),
+  controlBorder: computed(function (_ref59) {
+    var _ref60 = _slicedToArray(_ref59, 1),
+      lightestShade = _ref60[0];
     return tint(lightestShade, 0.31);
   }, ['colors.lightestShade']),
-  controlBorderSelected: computed(function (_ref45) {
-    var _ref46 = _slicedToArray(_ref45, 1),
-      lightestShade = _ref46[0];
+  controlBorderSelected: computed(function (_ref61) {
+    var _ref62 = _slicedToArray(_ref61, 1),
+      lightestShade = _ref62[0];
     return tint(lightestShade, 0.31);
   }, ['colors.lightestShade']),
-  controlBorderDisabled: computed(function (_ref47) {
-    var _ref48 = _slicedToArray(_ref47, 1),
-      lightestShade = _ref48[0];
+  controlBorderDisabled: computed(function (_ref63) {
+    var _ref64 = _slicedToArray(_ref63, 1),
+      lightestShade = _ref64[0];
     return tint(lightestShade, 0.31);
   }, ['colors.lightestShade'])
 });
 export var forms = {
-  maxWidth: computed(function (_ref49) {
-    var _ref50 = _slicedToArray(_ref49, 1),
-      base = _ref50[0];
+  maxWidth: computed(function (_ref65) {
+    var _ref66 = _slicedToArray(_ref65, 1),
+      base = _ref66[0];
     return mathWithUnits(base, function (x) {
       return x * 25;
     });

package/optimize/es/themes/amsterdam/theme.js

@@ -31,7 +31,8 @@ export var euiThemeAmsterdam = {
   flags: {
     hasGlobalFocusColor: false,
     hasVisColorAdjustment: true,
-    buttonVariant: 'classic'
+    buttonVariant: 'classic',
+    formVariant: 'classic'
   }
 };
 export var EuiThemeAmsterdam = buildTheme(euiThemeAmsterdam, AMSTERDAM_NAME_KEY);

package/optimize/es/themes/json/eui_theme_amsterdam_dark.json

@@ -413,6 +413,8 @@
   "euiColorBorderBaseFloating": "transparent",
   "euiColorBorderBaseFormsColorSwatch": "rgba(255,255,255,0.1)",
   "euiColorBorderBaseFormsControl": "#69696f",
+  "euiColorBorderInteractiveFormsHoverPlain": "transparent",
+  "euiColorBorderInteractiveFormsHoverDanger": "transparent",
   "euiColorBorderStrongPrimary": "#36A2EF",
   "euiColorBorderStrongAccent": "#F68FBE",
   "euiColorBorderStrongAccentSecondary": "#7DDED8",

package/optimize/es/themes/json/eui_theme_amsterdam_light.json

@@ -413,6 +413,8 @@
   "euiColorBorderBaseFloating": "transparent",
   "euiColorBorderBaseFormsColorSwatch": "rgba(0,0,0,0.1)",
   "euiColorBorderBaseFormsControl": "#919296",
+  "euiColorBorderInteractiveFormsHoverPlain": "transparent",
+  "euiColorBorderInteractiveFormsHoverDanger": "transparent",
   "euiColorBorderStrongPrimary": "#0077CC",
   "euiColorBorderStrongAccent": "#F04E98",
   "euiColorBorderStrongAccentSecondary": "#00BFB3",