@elastic/eui 99.4.0 → 100.0.0

package/optimize/lib/services/theme/context.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.defaultComputedTheme = exports.EuiThemeContext = exports.EuiSystemContext = exports.EuiNestedThemeContext = exports.EuiModificationsContext = exports.EuiColorModeContext = void 0;
 var _react = require("react");
-var _theme = require("../../themes/amsterdam/theme");
+var _euiThemeBorealis = require("@elastic/eui-theme-borealis");
 var _utils = require("./utils");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -15,10 +15,10 @@ var _utils = require("./utils");
  * Side Public License, v 1.
  */
 
-var EuiSystemContext = exports.EuiSystemContext = /*#__PURE__*/(0, _react.createContext)(_theme.EuiThemeAmsterdam);
+var EuiSystemContext = exports.EuiSystemContext = /*#__PURE__*/(0, _react.createContext)(_euiThemeBorealis.EuiThemeBorealis);
 var EuiModificationsContext = exports.EuiModificationsContext = /*#__PURE__*/(0, _react.createContext)({});
 var EuiColorModeContext = exports.EuiColorModeContext = /*#__PURE__*/(0, _react.createContext)(_utils.DEFAULT_COLOR_MODE);
-var defaultComputedTheme = exports.defaultComputedTheme = (0, _utils.getComputed)(_theme.EuiThemeAmsterdam, {}, _utils.DEFAULT_COLOR_MODE);
+var defaultComputedTheme = exports.defaultComputedTheme = (0, _utils.getComputed)(_euiThemeBorealis.EuiThemeBorealis, {}, _utils.DEFAULT_COLOR_MODE);
 var EuiThemeContext = exports.EuiThemeContext = /*#__PURE__*/(0, _react.createContext)(defaultComputedTheme);
 var EuiNestedThemeContext = exports.EuiNestedThemeContext = /*#__PURE__*/(0, _react.createContext)({
   isGlobalTheme: true,

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

@@ -21,6 +21,7 @@ var _context = require("./context");
 var _emotion2 = require("./emotion");
 var _style_memoization = require("./style_memoization");
 var _utils = require("./utils");
+var _color = require("../color");
 var _excluded = ["cloneElement", "className"];
 var _templateObject;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -71,8 +72,19 @@ var EuiThemeProvider = exports.EuiThemeProvider = function EuiThemeProvider(_ref
     setColorMode = _useState6[1];
   var prevColorMode = (0, _react2.useRef)(colorMode);
   var isParentTheme = (0, _react2.useRef)(prevSystemKey.current === parentSystem.key && colorMode === parentColorMode && (0, _isEqual.default)(parentModifications, modifications));
+  var updateVisColorStore = (0, _react2.useCallback)(function (theme) {
+    var _theme$flags$hasVisCo, _theme$flags;
+    _color.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 = (0, _utils.getComputed)(system, (0, _utils.buildTheme)(modifications, "_".concat(system.key)), colorMode);
+    setTimeout(function () {
+      updateVisColorStore(theme);
+    });
+    return theme;
+  };
   var _useState7 = (0, _react2.useState)(isParentTheme.current && Object.keys(parentTheme).length ? _objectSpread({}, parentTheme) // Intentionally create a new object to break referential equality
-    : (0, _utils.getComputed)(system, (0, _utils.buildTheme)(modifications, "_".concat(system.key)), colorMode)),
+    : getInitialTheme()),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     theme = _useState8[0],
     setTheme = _useState8[1];
@@ -82,8 +94,9 @@ var EuiThemeProvider = exports.EuiThemeProvider = function EuiThemeProvider(_ref
       setSystem(newSystem);
       prevSystemKey.current = newSystem.key;
       isParentTheme.current = false;
+      updateVisColorStore(theme);
     }
-  }, [_system, parentSystem]);
+  }, [_system, parentSystem, theme, updateVisColorStore]);
   (0, _react2.useEffect)(function () {
     var newModifications = (0, _utils.mergeDeep)(parentModifications, _modifications);
     if (!(0, _isEqual.default)(prevModifications.current, newModifications)) {

package/optimize/lib/services/theme/types.js

@@ -3,17 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.COLOR_MODES_STANDARD = exports.COLOR_MODES_INVERSE = 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 COLOR_MODES_STANDARD = exports.COLOR_MODES_STANDARD = {
-  light: 'LIGHT',
-  dark: 'DARK'
-};
-var COLOR_MODES_INVERSE = exports.COLOR_MODES_INVERSE = 'INVERSE';
+Object.defineProperty(exports, "COLOR_MODES_INVERSE", {
+  enumerable: true,
+  get: function get() {
+    return _euiThemeCommon.COLOR_MODES_INVERSE;
+  }
+});
+Object.defineProperty(exports, "COLOR_MODES_STANDARD", {
+  enumerable: true,
+  get: function get() {
+    return _euiThemeCommon.COLOR_MODES_STANDARD;
+  }
+});
+var _euiThemeCommon = require("@elastic/eui-theme-common");

package/optimize/lib/services/theme/utils.js

@@ -1,308 +1,66 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.buildTheme = exports.DEFAULT_COLOR_MODE = exports.Computed = void 0;
-exports.computed = computed;
-exports.setOn = exports.mergeDeep = exports.isInverseColorMode = exports.getOn = exports.getComputed = exports.getColorMode = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _types = require("./types");
-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) { (0, _defineProperty2.default)(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; } /*
- * 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 DEFAULT_COLOR_MODE = exports.DEFAULT_COLOR_MODE = _types.COLOR_MODES_STANDARD.light;
-
-/**
- * Returns whether the parameter is an object
- * @param {any} obj - Anything
- */
-var isObject = function isObject(obj) {
-  return obj && (0, _typeof2.default)(obj) === 'object';
-};
-
-/**
- * Returns whether the provided color mode is `inverse`
- * @param {string} colorMode - `light`, `dark`, or `inverse`
- */
-var isInverseColorMode = exports.isInverseColorMode = function isInverseColorMode(colorMode) {
-  return colorMode === _types.COLOR_MODES_INVERSE;
-};
-
-/**
- * Returns the color mode configured in the current EuiThemeProvider.
- * Returns the parent color mode if none is explicity set.
- * @param {string} colorMode - `light`, `dark`, or `inverse`
- * @param {string} parentColorMode - `LIGHT` or `DARK`; used as the fallback
- */
-var getColorMode = exports.getColorMode = function getColorMode(colorMode, parentColorMode) {
-  if (colorMode == null) {
-    return parentColorMode || DEFAULT_COLOR_MODE;
+Object.defineProperty(exports, "Computed", {
+  enumerable: true,
+  get: function get() {
+    return _euiThemeCommon.Computed;
   }
-  var mode = colorMode.toUpperCase();
-  if (isInverseColorMode(mode)) {
-    return parentColorMode === _types.COLOR_MODES_STANDARD.dark || parentColorMode === undefined ? _types.COLOR_MODES_STANDARD.light : _types.COLOR_MODES_STANDARD.dark;
-  } else {
-    return mode;
+});
+Object.defineProperty(exports, "DEFAULT_COLOR_MODE", {
+  enumerable: true,
+  get: function get() {
+    return _euiThemeCommon.DEFAULT_COLOR_MODE;
   }
-};
-
-/**
- * Returns a value at a given path on an object.
- * If `colorMode` is provided, will scope the value to the appropriate color mode key (LIGHT\DARK)
- * @param {object} model - Object
- * @param {string} _path - Dot-notated string to a path on the object
- * @param {string} colorMode - `light` or `dark`
- */
-var getOn = exports.getOn = function getOn(model, _path, colorMode) {
-  var path = _path.split('.');
-  var node = model;
-  while (path.length) {
-    var segment = path.shift();
-    if (node.hasOwnProperty(segment) === false) {
-      if (colorMode && node.hasOwnProperty(colorMode) === true && node[colorMode].hasOwnProperty(segment) === true) {
-        if (node[colorMode][segment] instanceof Computed) {
-          node = node[colorMode][segment].getValue(null, null, node, colorMode);
-        } else {
-          node = node[colorMode][segment];
-        }
-      } else {
-        return undefined;
-      }
-    } else {
-      if (node[segment] instanceof Computed) {
-        node = node[segment].getValue(null, null, node, colorMode);
-      } else {
-        node = node[segment];
-      }
-    }
+});
+Object.defineProperty(exports, "buildTheme", {
+  enumerable: true,
+  get: function get() {
+    return _euiThemeCommon.buildTheme;
   }
-  return node;
-};
-
-/**
- * Sets a value at a given path on an object.
- * @param {object} model - Object
- * @param {string} _path - Dot-notated string to a path on the object
- * @param {any} string -  The value to set
- */
-var setOn = exports.setOn = function setOn(model, _path, value) {
-  var path = _path.split('.');
-  var propertyName = path.pop();
-  var node = model;
-  while (path.length) {
-    var segment = path.shift();
-    if (node.hasOwnProperty(segment) === false) {
-      node[segment] = {};
-    }
-    node = node[segment];
+});
+Object.defineProperty(exports, "computed", {
+  enumerable: true,
+  get: function get() {
+    return _euiThemeCommon.computed;
   }
-  node[propertyName] = value;
-  return true;
-};
-
-/**
- * Creates a class to store the `computer` method and its eventual parameters.
- * Allows for on-demand computation with up-to-date parameters via `getValue` method.
- * @constructor
- * @param {function} computer - Function to be computed
- * @param {string | array} dependencies - Dependencies passed to the `computer` as parameters
- */
-var Computed = exports.Computed = /*#__PURE__*/function () {
-  function Computed(computer) {
-    var dependencies = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-    (0, _classCallCheck2.default)(this, Computed);
-    this.computer = computer;
-    this.dependencies = dependencies;
+});
+Object.defineProperty(exports, "getColorMode", {
+  enumerable: true,
+  get: function get() {
+    return _euiThemeCommon.getColorMode;
   }
-
-  /**
-   * Executes the `computer` method with the current state of the theme
-   * by taking into account previously computed values and modifications.
-   * @param {Proxy | object} base - Computed or uncomputed theme
-   * @param {Proxy | object} modifications - Theme value overrides
-   * @param {object} working - Partially computed theme
-   * @param {string} colorMode - `light` or `dark`
-   */
-  return (0, _createClass2.default)(Computed, [{
-    key: "getValue",
-    value: function getValue(base) {
-      var modifications = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      var working = arguments.length > 2 ? arguments[2] : undefined;
-      var colorMode = arguments.length > 3 ? arguments[3] : undefined;
-      if (!this.dependencies.length) {
-        return this.computer(working);
-      }
-      if (!Array.isArray(this.dependencies)) {
-        var _ref, _getOn;
-        return this.computer((_ref = (_getOn = getOn(working, this.dependencies)) !== null && _getOn !== void 0 ? _getOn : getOn(modifications, this.dependencies, colorMode)) !== null && _ref !== void 0 ? _ref : getOn(base, this.dependencies, colorMode));
-      }
-      return this.computer(this.dependencies.map(function (dependency) {
-        var _ref2, _getOn2;
-        return (_ref2 = (_getOn2 = getOn(working, dependency)) !== null && _getOn2 !== void 0 ? _getOn2 : getOn(modifications, dependency, colorMode)) !== null && _ref2 !== void 0 ? _ref2 : getOn(base, dependency, colorMode);
-      }));
-    }
-  }]);
-}();
-/**
- * Returns a Class (`Computed`) that stores the arbitrary computer method
- * and references to its optional dependecies.
- * @param {function} computer - Arbitrary method to be called at compute time.
- * @param {string | array} dependencies - Values that will be provided to `computer` at compute time.
- */
-function computed(comp, dep) {
-  return new Computed(comp, dep);
-}
-
-/**
- * Takes an uncomputed theme, and computes and returns all values taking
- * into consideration value overrides and configured color mode.
- * Overrides take precedence, and only values in the current color mode
- * are computed and returned.
- * @param {Proxy} base - Object to transform into Proxy
- * @param {Proxy | object} over - Unique identifier or name
- * @param {string} colorMode - `light` or `dark`
- */
-var getComputed = exports.getComputed = function getComputed(base, over, colorMode) {
-  var output = {
-    themeName: base.key
-  };
-  function loop(base, over) {
-    var checkExisting = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    var path = arguments.length > 3 ? arguments[3] : undefined;
-    Object.keys(base).forEach(function (key) {
-      var newPath = path ? "".concat(path, ".").concat(key) : "".concat(key);
-      // @ts-expect-error `key` is not necessarily a colorMode key
-      if ([].concat((0, _toConsumableArray2.default)(Object.values(_types.COLOR_MODES_STANDARD)), [colorMode]).includes(key)) {
-        if (key !== colorMode) {
-          return;
-        } else {
-          var colorModeSegment = new RegExp("(\\.".concat(colorMode, "\\b)|(\\b").concat(colorMode, "\\.)"));
-          newPath = newPath.replace(colorModeSegment, '');
-        }
-      }
-      var existing = checkExisting && getOn(output, newPath);
-      if (!existing || isObject(existing)) {
-        var baseValue = base[key] instanceof Computed ? base[key].getValue(base.root, over.root, output, colorMode) : base[key];
-        var overValue = over[key] instanceof Computed ? over[key].getValue(base.root, over.root, output, colorMode) : over[key];
-        if (isObject(baseValue) && !Array.isArray(baseValue)) {
-          loop(baseValue, overValue !== null && overValue !== void 0 ? overValue : {}, checkExisting, newPath);
-        } else {
-          setOn(output, newPath, overValue !== null && overValue !== void 0 ? overValue : baseValue);
-        }
-      }
-    });
+});
+Object.defineProperty(exports, "getComputed", {
+  enumerable: true,
+  get: function get() {
+    return _euiThemeCommon.getComputed;
   }
-  // Compute standard theme values and apply overrides
-  loop(base, over);
-  // Compute and apply extension values only
-  loop(over, {}, true);
-  return output;
-};
-
-/**
- * Builds a Proxy with a custom `handler` designed to self-reference values
- * and prevent arbitrary value overrides.
- * @param {object} model - Object to transform into Proxy
- * @param {string} key - Unique identifier or name
- */
-var buildTheme = exports.buildTheme = function buildTheme(model, key) {
-  var handler = {
-    getPrototypeOf: function getPrototypeOf(target) {
-      return Reflect.getPrototypeOf(target.model);
-    },
-    setPrototypeOf: function setPrototypeOf(target, prototype) {
-      return Reflect.setPrototypeOf(target.model, prototype);
-    },
-    isExtensible: function isExtensible(target) {
-      return Reflect.isExtensible(target);
-    },
-    preventExtensions: function preventExtensions(target) {
-      return Reflect.preventExtensions(target.model);
-    },
-    getOwnPropertyDescriptor: function getOwnPropertyDescriptor(target, key) {
-      return Reflect.getOwnPropertyDescriptor(target.model, key);
-    },
-    defineProperty: function defineProperty(target, property, attributes) {
-      return Reflect.defineProperty(target.model, property, attributes);
-    },
-    has: function has(target, property) {
-      return Reflect.has(target.model, property);
-    },
-    get: function get(_target, property) {
-      if (property === 'key') {
-        return _target[property];
-      }
-
-      // prevent Safari from locking up when the proxy is used in dev tools
-      // as it doesn't support getPrototypeOf
-      if (property === '__proto__') return {};
-      var target = property === 'root' ? _target : _target.model || _target;
-      // @ts-ignore `string` index signature
-      var value = target[property];
-      if (isObject(value) && !Array.isArray(value)) {
-        return new Proxy({
-          model: value,
-          root: _target.root,
-          key: "_".concat(_target.key)
-        }, handler);
-      } else {
-        return value;
-      }
-    },
-    set: function set(target) {
-      return target;
-    },
-    deleteProperty: function deleteProperty(target) {
-      return target;
-    },
-    ownKeys: function ownKeys(target) {
-      return Reflect.ownKeys(target.model);
-    },
-    apply: function apply(target) {
-      return target;
-    },
-    construct: function construct(target) {
-      return target;
-    }
-  };
-  var themeProxy = new Proxy({
-    model: model,
-    root: model,
-    key: key
-  }, handler);
-  return themeProxy;
-};
-
-/**
- * Deeply merges two objects, using `source` values whenever possible.
- * @param {object} _target - Object with fallback values
- * @param {object} source - Object with desired values
- */
-var mergeDeep = exports.mergeDeep = function mergeDeep(_target) {
-  var source = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var target = _objectSpread({}, _target);
-  if (!isObject(target) || !isObject(source)) {
-    return source;
+});
+Object.defineProperty(exports, "getOn", {
+  enumerable: true,
+  get: function get() {
+    return _euiThemeCommon.getOn;
+  }
+});
+Object.defineProperty(exports, "isInverseColorMode", {
+  enumerable: true,
+  get: function get() {
+    return _euiThemeCommon.isInverseColorMode;
+  }
+});
+Object.defineProperty(exports, "mergeDeep", {
+  enumerable: true,
+  get: function get() {
+    return _euiThemeCommon.mergeDeep;
   }
-  Object.keys(source).forEach(function (key) {
-    var targetValue = target[key];
-    var sourceValue = source[key];
-    if (isObject(targetValue) && isObject(sourceValue)) {
-      target[key] = mergeDeep(_objectSpread({}, targetValue), _objectSpread({}, sourceValue));
-    } else {
-      target[key] = sourceValue;
-    }
-  });
-  return target;
-};
+});
+Object.defineProperty(exports, "setOn", {
+  enumerable: true,
+  get: function get() {
+    return _euiThemeCommon.setOn;
+  }
+});
+var _euiThemeCommon = require("@elastic/eui-theme-common");

package/optimize/lib/themes/amsterdam/global_styling/functions/shadows.js

@@ -1,24 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getShadowColor = void 0;
-var _chromaJs = _interopRequireDefault(require("chroma-js"));
-var _types = require("../../../../services/theme/types");
-/*
- * 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.
- */
-
-// Create a CSS color value using whose opacity is determined based
-// on either a light or dark theme. We use a multiplier
-// of 1 for light themes and 2.5 for dark themes
-var getShadowColor = exports.getShadowColor = function getShadowColor(color, opacity, colorMode) {
-  var themeOpacity = colorMode === _types.COLOR_MODES_STANDARD.dark ? opacity * 3.5 : opacity * 1;
-  return (0, _chromaJs.default)(color).alpha(themeOpacity).css();
-};
+Object.defineProperty(exports, "getShadowColor", {
+  enumerable: true,
+  get: function get() {
+    return _euiThemeCommon.getShadowColor;
+  }
+});
+var _euiThemeCommon = require("@elastic/eui-theme-common");