@elastic/eui 105.0.0 → 106.0.0-amsterdam.0

package/es/services/theme/provider.js

@@ -95,14 +95,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;
   };
@@ -117,9 +119,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)) {
@@ -143,12 +147,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/es/themes/amsterdam/global_styling/variables/_colors.js

@@ -392,6 +392,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];
@@ -684,6 +686,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];
@@ -782,11 +786,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/es/themes/amsterdam/global_styling/variables/_forms.js

@@ -48,6 +48,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];
@@ -59,99 +60,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/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/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/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",

package/es/themes/json/eui_theme_borealis_dark.json

@@ -413,6 +413,8 @@
   "euiColorBorderBaseFloating": "#2B394F",
   "euiColorBorderBaseFormsColorSwatch": "rgba(255,255,255, 0.32)",
   "euiColorBorderBaseFormsControl": "#6A7FA0",
+  "euiColorBorderInteractiveFormsHoverPlain": "#5A6D8C",
+  "euiColorBorderInteractiveFormsHoverDanger": "#EE4C48",
   "euiColorBorderStrongPrimary": "#61A2FF",
   "euiColorBorderStrongAccent": "#EE72A6",
   "euiColorBorderStrongAccentSecondary": "#16C5C0",

package/es/themes/json/eui_theme_borealis_light.json

@@ -413,13 +413,15 @@
   "euiColorBorderBaseFloating": "transparent",
   "euiColorBorderBaseFormsColorSwatch": "rgba(72,89,117, 0.24)",
   "euiColorBorderBaseFormsControl": "#8E9FBC",
-  "euiColorBorderStrongPrimary": "#1750BA",
-  "euiColorBorderStrongAccent": "#A11262",
-  "euiColorBorderStrongAccentSecondary": "#047471",
-  "euiColorBorderStrongNeutral": "#0F658A",
-  "euiColorBorderStrongSuccess": "#09724D",
-  "euiColorBorderStrongWarning": "#825803",
-  "euiColorBorderStrongRisk": "#9E3A16",
-  "euiColorBorderStrongDanger": "#A71627",
+  "euiColorBorderInteractiveFormsHoverPlain": "#B4C1D5",
+  "euiColorBorderInteractiveFormsHoverDanger": "#DA3737",
+  "euiColorBorderStrongPrimary": "#0B64DD",
+  "euiColorBorderStrongAccent": "#BC1E70",
+  "euiColorBorderStrongAccentSecondary": "#008B87",
+  "euiColorBorderStrongNeutral": "#19799F",
+  "euiColorBorderStrongSuccess": "#008A5E",
+  "euiColorBorderStrongWarning": "#966B03",
+  "euiColorBorderStrongRisk": "#C24411",
+  "euiColorBorderStrongDanger": "#C61E25",
   "euiColorBorderStrongText": "#5A6D8C"
 }