@elastic/eui 70.4.0 → 71.0.0

package/optimize/lib/components/form/range/range_highlight.styles.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiRangeHighlightStyles = exports.euiRangeHighlightProgressStyles = exports.euiRangeHighlightLevelsWrapperStyles = exports.euiRangeHighlightLevelsStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _range = require("./range.styles");
+
+/*
+ * 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 euiRangeHighlightStyles = function euiRangeHighlightStyles(euiThemeContext) {
+  var range = (0, _range.euiRangeVariables)(euiThemeContext);
+  return {
+    euiRangeHighlight: /*#__PURE__*/(0, _react.css)("position:absolute;block-size:", range.highlightHeight, ";inset-inline-start:0;inline-size:100%;overflow:hidden;z-index:", range.highlightZIndex, ";pointer-events:none;inset-block-start:", range.trackTopPositionWithoutTicks, ";;label:euiRangeHighlight;"),
+    hasTicks: /*#__PURE__*/(0, _react.css)("inset-block-start:", range.trackTopPositionWithTicks, ";;label:hasTicks;")
+  };
+};
+
+exports.euiRangeHighlightStyles = euiRangeHighlightStyles;
+
+var euiRangeHighlightProgressStyles = function euiRangeHighlightProgressStyles(euiThemeContext) {
+  var range = (0, _range.euiRangeVariables)(euiThemeContext);
+  return {
+    euiRangeHighlight__progress: /*#__PURE__*/(0, _react.css)("block-size:", range.highlightHeight, ";border-radius:", range.trackBorderRadius, ";background-color:", range.highlightColor, ";border-color:", range.highlightColor, ";.euiRangeSlider:focus-visible~.euiRangeHighlight &,.euiRangeThumb:focus-visible~.euiRangeHighlight &,.euiRangeDraggable:focus~.euiRangeHighlight &{background-color:", range.focusColor, ";};label:euiRangeHighlight__progress;")
+  };
+};
+
+exports.euiRangeHighlightProgressStyles = euiRangeHighlightProgressStyles;
+
+var euiRangeHighlightLevelsWrapperStyles = function euiRangeHighlightLevelsWrapperStyles(euiThemeContext) {
+  var euiRangeVars = (0, _range.euiRangeVariables)(euiThemeContext);
+  return {
+    euiRangeHighlight__levelsWrapper: /*#__PURE__*/(0, _react.css)("block-size:", euiRangeVars.trackHeight, ";position:relative;overflow:hidden;;label:euiRangeHighlight__levelsWrapper;")
+  };
+};
+
+exports.euiRangeHighlightLevelsWrapperStyles = euiRangeHighlightLevelsWrapperStyles;
+
+var euiRangeHighlightLevelsStyles = function euiRangeHighlightLevelsStyles(euiThemeContext) {
+  var euiRangeVars = (0, _range.euiRangeVariables)(euiThemeContext);
+  return {
+    euiRangeHighlight__levels: /*#__PURE__*/(0, _react.css)("background:transparent;block-size:", euiRangeVars.trackHeight, ";inset-block-start:0;;label:euiRangeHighlight__levels;")
+  };
+};
+
+exports.euiRangeHighlightLevelsStyles = euiRangeHighlightLevelsStyles;

package/optimize/lib/components/form/range/range_input.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,14 +13,24 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+
+var _services = require("../../../services");
+
+var _global_styling = require("../../../global_styling");
 
 var _field_number = require("../field_number");
 
+var _range_input = require("./range_input.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["min", "max", "step", "value", "disabled", "compressed", "onChange", "name", "side", "digitTolerance", "fullWidth", "autoSize"];
 
+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 || _typeof(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; }
+
 var EuiRangeInput = function EuiRangeInput(_ref) {
   var min = _ref.min,
       max = _ref.max,
@@ -38,12 +50,18 @@ var EuiRangeInput = function EuiRangeInput(_ref) {
   // Chrome will properly size the input based on the max value, but FF does not.
   // Calculate the width of the input based on highest number of characters.
   // Add 2 to accommodate for input stepper
-  var widthStyle = autoSize ? {
-    width: "".concat(digitTolerance / 1.25 + 2, "em")
-  } : undefined;
+  var widthStyle = (0, _react.useMemo)(function () {
+    return autoSize ? (0, _global_styling.logicalStyles)({
+      width: "".concat(digitTolerance / 1.25 + 2, "em")
+    }) : {};
+  }, [autoSize, digitTolerance]);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _range_input.euiRangeInputStyles)(euiTheme);
+  var cssStyles = [styles.euiRangeInput];
   return (0, _react2.jsx)(_field_number.EuiFieldNumber, (0, _extends2.default)({
     name: name,
     className: "euiRangeInput euiRangeInput--".concat(side),
+    css: cssStyles,
     min: Number(min),
     max: Number(max),
     step: step,

package/optimize/lib/components/form/range/range_input.styles.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiRangeInputStyles = void 0;
+
+var _react = require("@emotion/react");
+
+/*
+ * 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 euiRangeInputStyles = function euiRangeInputStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiRangeInput: /*#__PURE__*/(0, _react.css)("inline-size:auto;min-inline-size:", euiTheme.base * 4, "px;.euiRange__popover &{margin:0;inline-size:100%;};label:euiRangeInput;")
+  };
+};
+
+exports.euiRangeInputStyles = euiRangeInputStyles;

package/optimize/lib/components/form/range/range_label.js

@@ -9,7 +9,9 @@ exports.EuiRangeLabel = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../services");
+
+var _range_label = require("./range_label.styles");
 
 var _react2 = require("@emotion/react");
 
@@ -25,11 +27,12 @@ var EuiRangeLabel = function EuiRangeLabel(_ref) {
       disabled = _ref.disabled,
       _ref$side = _ref.side,
       side = _ref$side === void 0 ? 'max' : _ref$side;
-  var classes = (0, _classnames.default)('euiRangeLabel', "euiRangeLabel--".concat(side), {
-    'euiRangeLabel--isDisabled': disabled
-  });
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _range_label.euiRangeLabelStyles)(euiTheme);
+  var cssStyles = [styles.euiRangeLabel, styles[side], disabled && styles.isDisabled];
   return (0, _react2.jsx)("label", {
-    className: classes
+    className: "euiRangeLabel",
+    css: cssStyles
   }, children);
 };
 

package/optimize/lib/components/form/range/range_label.styles.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiRangeLabelStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../../global_styling");
+
+var _range = require("./range.styles");
+
+/*
+ * 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 euiRangeLabelStyles = function euiRangeLabelStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var range = (0, _range.euiRangeVariables)(euiThemeContext);
+  return {
+    euiRangeLabel: /*#__PURE__*/(0, _react.css)("font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 'xs').fontSize, ";;label:euiRangeLabel;"),
+    min: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-right', euiTheme.size.s), ";;label:min;"),
+    max: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-left', euiTheme.size.s), ";;label:max;"),
+    isDisabled: /*#__PURE__*/(0, _react.css)("opacity:", range.disabledOpacity, ";;label:isDisabled;")
+  };
+};
+
+exports.euiRangeLabelStyles = euiRangeLabelStyles;

package/optimize/lib/components/form/range/range_levels.js

@@ -7,45 +7,34 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LEVEL_COLORS = exports.EuiRangeLevels = void 0;
+exports.EuiRangeLevels = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _utils = require("./utils");
+var _services = require("../../../services");
 
-var _react2 = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
 
-var _excluded = ["color", "className", "min", "max"];
+var _range_levels_colors = require("./range_levels_colors");
 
-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); }
+var _range_levels = require("./range_levels.styles");
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(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; }
+var _utils = require("./utils");
 
-var calculateOffset = function calculateOffset(position, value, bound) {
-  var threshold = 30;
-  var offset = value === bound ? 0 : _utils.EUI_THUMB_SIZE / 2;
+var _react2 = require("@emotion/react");
 
-  if (offset !== 0) {
-    // Estimating offset by eye. Trying to account for range scaling at both ends.
-    offset = position <= threshold ? offset + 1 / position * threshold : offset;
-    offset = position >= 100 - threshold ? offset - 1 / (100 - position) * threshold : offset;
-  }
+var _excluded = ["levels", "max", "min", "showTicks", "showRange", "trackWidth"],
+    _excluded2 = ["color", "className", "min", "max"];
 
-  return offset;
-};
+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); }
 
-var LEVEL_COLORS = ['primary', 'success', 'warning', 'danger'];
-exports.LEVEL_COLORS = LEVEL_COLORS;
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(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; }
 
 var EuiRangeLevels = function EuiRangeLevels(_ref) {
   var _ref$levels = _ref.levels,
@@ -53,43 +42,52 @@ var EuiRangeLevels = function EuiRangeLevels(_ref) {
       max = _ref.max,
       min = _ref.min,
       showTicks = _ref.showTicks,
-      compressed = _ref.compressed;
-
-  var _useState = (0, _react.useState)(0),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      trackWidth = _useState2[0],
-      setTrackWidth = _useState2[1];
-
-  var handleRef = function handleRef(node) {
-    var _node$clientWidth;
-
-    setTrackWidth((_node$clientWidth = node === null || node === void 0 ? void 0 : node.clientWidth) !== null && _node$clientWidth !== void 0 ? _node$clientWidth : 0);
-  };
-
-  var validateLevelIsInRange = function validateLevelIsInRange(level) {
-    if (level.min < min) {
-      throw new Error("The level min of ".concat(level.min, " is lower than the min value of ").concat(min, "."));
-    }
-
-    if (level.max > max) {
-      throw new Error("The level max of ".concat(level.max, " is higher than the max value of ").concat(max, "."));
-    }
-  };
-
-  var classes = (0, _classnames.default)('euiRangeLevels', {
-    'euiRangeLevels--hasTicks': showTicks,
-    'euiRangeLevels--compressed': compressed
-  });
-  return (0, _react2.jsx)("div", {
-    className: classes,
-    ref: handleRef
-  }, levels.map(function (level, index) {
-    validateLevelIsInRange(level);
-    var color = level.color,
-        className = level.className,
-        levelMin = level.min,
-        levelMax = level.max,
-        rest = (0, _objectWithoutProperties2.default)(level, _excluded);
+      showRange = _ref.showRange,
+      trackWidth = _ref.trackWidth,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _range_levels.euiRangeLevelsStyles)(euiTheme);
+  var cssStyles = [styles.euiRangeLevels, showTicks && styles.hasTicks, showRange && styles.hasRange];
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    className: "euiRangeLevels",
+    css: cssStyles
+  }, rest), levels.map(function (level, index) {
+    return (0, _react2.jsx)(EuiRangeLevelElement, {
+      key: index,
+      level: level,
+      min: min,
+      max: max,
+      trackWidth: trackWidth
+    });
+  }));
+}; // Internal subcomponent
+
+
+exports.EuiRangeLevels = EuiRangeLevels;
+
+var EuiRangeLevelElement = function EuiRangeLevelElement(_ref2) {
+  var level = _ref2.level,
+      min = _ref2.min,
+      max = _ref2.max,
+      trackWidth = _ref2.trackWidth;
+  var color = level.color,
+      className = level.className,
+      levelMin = level.min,
+      levelMax = level.max,
+      levelRest = (0, _objectWithoutProperties2.default)(level, _excluded2);
+  var isNamedColor = (0, _react.useMemo)(function () {
+    return (0, _range_levels_colors.isNamedLevelColor)(color);
+  }, [color]);
+  (0, _react.useEffect)(function () {
+    validateLevelIsInRange({
+      min: levelMin,
+      max: levelMax
+    }, {
+      min: min,
+      max: max
+    });
+  }, [levelMin, levelMax, min, max]);
+  var styles = (0, _react.useMemo)(function () {
     var left = 0;
     var right = 0;
     var leftOffset = 0;
@@ -102,21 +100,45 @@ var EuiRangeLevels = function EuiRangeLevels(_ref) {
       rightOffset = calculateOffset(right, levelMax, max);
     }
 
-    var isNamedColor = LEVEL_COLORS.includes(color);
-    var styles = {
+    return (0, _global_styling.logicalStyles)({
       left: "calc(".concat(left, "% + ").concat(leftOffset, "px)"),
       right: "calc(".concat(100 - right, "% - ").concat(rightOffset, "px)"),
       backgroundColor: !isNamedColor ? color : undefined
-    };
-    var levelClasses = (0, _classnames.default)('euiRangeLevel', (0, _defineProperty2.default)({
-      'euiRangeLevel--customColor': !isNamedColor
-    }, "euiRangeLevel--".concat(color), isNamedColor), className);
-    return (0, _react2.jsx)("span", (0, _extends2.default)({
-      key: index,
-      style: styles,
-      className: levelClasses
-    }, rest));
-  }));
+    });
+  }, [levelMin, levelMax, min, max, trackWidth, isNamedColor, color]);
+  var levelClasses = (0, _classnames.default)('euiRangeLevel', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var levelStyles = (0, _range_levels.euiRangeLevelStyles)(euiTheme);
+  var cssLevelStyles = [levelStyles.euiRangeLevel, isNamedColor ? levelStyles[color] : levelStyles.customColor];
+  return (0, _react2.jsx)("span", (0, _extends2.default)({
+    style: styles,
+    className: levelClasses,
+    css: cssLevelStyles
+  }, levelRest));
+};
+
+var validateLevelIsInRange = function validateLevelIsInRange(level, _ref3) {
+  var min = _ref3.min,
+      max = _ref3.max;
+
+  if (level.min < min) {
+    throw new Error("The level min of ".concat(level.min, " is lower than the min value of ").concat(min, "."));
+  }
+
+  if (level.max > max) {
+    throw new Error("The level max of ".concat(level.max, " is higher than the max value of ").concat(max, "."));
+  }
 };
 
-exports.EuiRangeLevels = EuiRangeLevels;
+var calculateOffset = function calculateOffset(position, value, bound) {
+  var threshold = 30;
+  var offset = value === bound ? 0 : _utils.EUI_THUMB_SIZE / 2;
+
+  if (offset !== 0) {
+    // Estimating offset by eye. Trying to account for range scaling at both ends.
+    offset = position <= threshold ? offset + 1 / position * threshold : offset;
+    offset = position >= 100 - threshold ? offset - 1 / (100 - position) * threshold : offset;
+  }
+
+  return offset;
+};

package/optimize/lib/components/form/range/range_levels.styles.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiRangeLevelsStyles = exports.euiRangeLevelStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _services = require("../../../services");
+
+var _range_levels_colors = require("./range_levels_colors");
+
+var _range = require("./range.styles");
+
+/*
+ * 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 euiRangeLevelsStyles = function euiRangeLevelsStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+      colorMode = euiThemeContext.colorMode;
+  var range = (0, _range.euiRangeVariables)(euiThemeContext);
+  var isColorDark = colorMode === 'DARK';
+  var stripeColor = isColorDark ? euiTheme.colors.ink : euiTheme.colors.ghost;
+  var stripesBackground = "repeating-linear-gradient(\n    -45deg,\n    ".concat((0, _services.transparentize)(stripeColor, 0.5), ",\n    ").concat((0, _services.transparentize)(stripeColor, 0.5), " 25%,\n    ").concat((0, _services.transparentize)(stripeColor, 0.7), " 25%,\n    ").concat((0, _services.transparentize)(stripeColor, 0.7), " 50%,\n    ").concat((0, _services.transparentize)(stripeColor, 0.5), " 50%\n  )");
+  return {
+    euiRangeLevels: /*#__PURE__*/(0, _react.css)("display:flex;justify-content:stretch;position:absolute;inset-inline:0;inset-block-start:", range.trackTopPositionWithoutTicks, ";z-index:", range.levelsZIndex, ";;label:euiRangeLevels;"),
+    hasRange: /*#__PURE__*/(0, _react.css)("&::after{content:'';position:absolute;block-size:", range.trackHeight, ";inline-size:100%;background-image:", stripesBackground, ";background-size:", euiTheme.size.s, " ", euiTheme.size.s, ";border-radius:", range.trackBorderRadius, ";};label:hasRange;"),
+    hasTicks: /*#__PURE__*/(0, _react.css)("inset-block-start:", range.trackTopPositionWithTicks, ";;label:hasTicks;")
+  };
+};
+
+exports.euiRangeLevelsStyles = euiRangeLevelsStyles;
+
+var euiRangeLevelStyles = function euiRangeLevelStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var range = (0, _range.euiRangeVariables)(euiThemeContext);
+  return {
+    euiRangeLevel: /*#__PURE__*/(0, _react.css)("display:block;position:absolute;block-size:", range.trackHeight, ";margin-block:0;&:first-child{margin-inline-start:0;border-start-start-radius:", range.trackBorderRadius, ";border-end-start-radius:", range.trackBorderRadius, ";}&:last-child{margin-inline-end:0;border-start-end-radius:", range.trackBorderRadius, ";border-end-end-radius:", range.trackBorderRadius, ";};label:euiRangeLevel;"),
+    primary: /*#__PURE__*/(0, _react.css)("background-color:", (0, _range_levels_colors.euiRangeLevelColor)('primary', euiTheme), ";;label:primary;"),
+    success: /*#__PURE__*/(0, _react.css)("background-color:", (0, _range_levels_colors.euiRangeLevelColor)('success', euiTheme), ";;label:success;"),
+    warning: /*#__PURE__*/(0, _react.css)("background-color:", (0, _range_levels_colors.euiRangeLevelColor)('warning', euiTheme), ";;label:warning;"),
+    danger: /*#__PURE__*/(0, _react.css)("background-color:", (0, _range_levels_colors.euiRangeLevelColor)('danger', euiTheme), ";;label:danger;"),
+    customColor: /*#__PURE__*/(0, _react.css)(";label:customColor;")
+  };
+};
+
+exports.euiRangeLevelStyles = euiRangeLevelStyles;

package/optimize/lib/components/form/range/range_levels_colors.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isNamedLevelColor = exports.getLevelColor = exports.euiRangeLevelColor = exports.LEVEL_COLORS = void 0;
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+/*
+ * 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 LEVEL_COLORS = ['primary', 'success', 'warning', 'danger'];
+exports.LEVEL_COLORS = LEVEL_COLORS;
+
+var isNamedLevelColor = function isNamedLevelColor(color) {
+  return LEVEL_COLORS.includes(color);
+};
+
+exports.isNamedLevelColor = isNamedLevelColor;
+
+var euiRangeLevelColor = function euiRangeLevelColor(color, euiTheme) {
+  return isNamedLevelColor(color) ? euiTheme.colors[color] : color;
+};
+
+exports.euiRangeLevelColor = euiRangeLevelColor;
+
+var getLevelColor = function getLevelColor(levels, value) {
+  var color;
+
+  var _iterator = _createForOfIteratorHelper(levels),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var level = _step.value;
+
+      if (level.min <= value && level.max >= value) {
+        color = level.color;
+        return color;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+
+  return undefined;
+};
+
+exports.getLevelColor = getLevelColor;

package/optimize/lib/components/form/range/range_slider.js

@@ -11,20 +11,34 @@ exports.EuiRangeSlider = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _services = require("../../../services");
+
+var _global_styling = require("../../../global_styling");
+
+var _range_levels_colors = require("./range_levels_colors");
+
+var _range_slider = require("./range_slider.styles");
+
 var _react2 = require("@emotion/react");
 
-var _excluded = ["className", "disabled", "id", "max", "min", "name", "step", "onChange", "tabIndex", "value", "style", "showTicks", "showRange", "hasFocus", "compressed"];
+var _excluded = ["className", "disabled", "id", "max", "min", "name", "step", "onChange", "tabIndex", "value", "style", "showTicks", "showRange", "thumbColor"];
 
 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 || _typeof(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; }
 
+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 EuiRangeSlider = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var className = _ref.className,
       disabled = _ref.disabled,
@@ -39,28 +53,32 @@ var EuiRangeSlider = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       style = _ref.style,
       showTicks = _ref.showTicks,
       showRange = _ref.showRange,
-      hasFocus = _ref.hasFocus,
-      compressed = _ref.compressed,
+      thumbColor = _ref.thumbColor,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classes = (0, _classnames.default)('euiRangeSlider', {
-    'euiRangeSlider--hasTicks': showTicks,
-    'euiRangeSlider--hasFocus': hasFocus,
-    'euiRangeSlider--hasRange': showRange,
-    'euiRangeSlider--compressed': compressed
-  }, className);
+  var classes = (0, _classnames.default)('euiRangeSlider', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _range_slider.euiRangeSliderStyles)(euiTheme);
+  var thumbStyles = (0, _range_slider.euiRangeSliderThumbStyles)(euiTheme);
+  var cssStyles = [styles.euiRangeSlider, showTicks && styles.hasTicks, showRange && styles.hasRange, thumbColor && thumbStyles.thumb];
+  var sliderStyle = (0, _react.useMemo)(function () {
+    return (0, _global_styling.logicalStyles)(_objectSpread({
+      color: thumbColor && (0, _range_levels_colors.euiRangeLevelColor)(thumbColor, euiTheme.euiTheme)
+    }, style));
+  }, [thumbColor, euiTheme, style]);
   return (0, _react2.jsx)("input", (0, _extends2.default)({
     ref: ref,
     type: "range",
     id: id,
     name: name,
     className: classes,
+    css: cssStyles,
     min: min,
     max: max,
     step: step,
     value: value,
     disabled: disabled,
     onChange: onChange,
-    style: style,
+    style: sliderStyle,
     tabIndex: tabIndex
   }, rest));
 });