@elastic/eui 97.3.1-rc.0 → 98.0.0

package/lib/components/badge/beta_badge/beta_badge.styles.js

@@ -42,43 +42,31 @@ var euiBetaBadgeStyles = exports.euiBetaBadgeStyles = function euiBetaBadgeStyle
   var euiTheme = euiThemeContext.euiTheme,
     colorMode = euiThemeContext.colorMode;
   var badgeColors = (0, _color_utils.euiBadgeColors)(euiThemeContext);
-  var sizes = {
-    m: {
-      height: euiTheme.size.l,
-      padding: euiTheme.size.base
-    },
-    s: {
-      height: (0, _global_styling.mathWithUnits)(euiTheme.size.xs, function (x) {
-        return x + euiTheme.base;
-      }),
-      padding: euiTheme.size.m
-    }
-  };
-  var getLineHeight = function getLineHeight(height) {
-    return (0, _global_styling.mathWithUnits)([height, euiTheme.border.width.thin], function (x, y) {
-      return x - y * 2;
-    });
-  };
   return {
-    euiBetaBadge: /*#__PURE__*/(0, _react.css)("display:inline-block;border-radius:", euiTheme.size.l, ";border:", euiTheme.border.width.thin, " solid transparent;cursor:default;font-weight:", euiTheme.font.weight.bold, ";text-transform:uppercase;letter-spacing:0.05em;text-align:center;", (0, _global_styling.euiTextTruncate)(), " &:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'outset', {
+    euiBetaBadge: /*#__PURE__*/(0, _react.css)("display:inline-block;border-radius:", euiTheme.size.l, ";cursor:default;font-weight:", euiTheme.font.weight.bold, ";text-transform:uppercase;letter-spacing:0.05em;text-align:center;", (0, _global_styling.euiTextTruncate)(), " &:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'outset', {
       color: colorMode === 'DARK' ? euiTheme.colors.ghost : euiTheme.colors.ink
     }), ";};label:euiBetaBadge;"),
     // Colors
     accent: /*#__PURE__*/(0, _react.css)(badgeColors.accentText, ";label:accent;"),
     subdued: /*#__PURE__*/(0, _react.css)(badgeColors.subdued, ";label:subdued;"),
-    hollow: /*#__PURE__*/(0, _react.css)("color:", badgeColors.hollow.color, ";background-color:", badgeColors.hollow.backgroundColor, ";border-color:", badgeColors.hollow.borderColor, ";;label:hollow;"),
+    hollow: /*#__PURE__*/(0, _react.css)("color:", badgeColors.hollow.color, ";background-color:", badgeColors.hollow.backgroundColor, ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", badgeColors.hollow.borderColor, ";;label:hollow;"),
     // Font sizes
-    m: /*#__PURE__*/(0, _react.css)("font-size:", (0, _global_styling.euiFontSizeFromScale)('xs', euiTheme), ";line-height:", getLineHeight(sizes.m.height), ";;label:m;"),
-    s: /*#__PURE__*/(0, _react.css)("font-size:0.625rem;line-height:", getLineHeight(sizes.s.height), ";;label:s;"),
+    m: /*#__PURE__*/(0, _react.css)("font-size:", (0, _global_styling.euiFontSizeFromScale)('xs', euiTheme), ";line-height:", euiTheme.size.l, ";;label:m;"),
+    s: /*#__PURE__*/(0, _react.css)("font-size:0.625rem;line-height:", (0, _global_styling.mathWithUnits)(euiTheme.size.xs, function (x) {
+      return x + euiTheme.base;
+    }), ";;label:s;"),
+    // Padding/width sizes
     badgeSizes: {
       default: {
-        m: (0, _global_styling.logicalCSS)('padding-horizontal', sizes.m.padding),
-        s: (0, _global_styling.logicalCSS)('padding-horizontal', sizes.s.padding)
+        m: "\n        ".concat((0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base)),
+        s: "\n        ".concat((0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.m))
       },
       // When it's just an icon or a single letter, make the badge a circle
       circle: {
-        m: (0, _global_styling.logicalSizeCSS)(sizes.m.height),
-        s: (0, _global_styling.logicalSizeCSS)(sizes.s.height)
+        m: "\n          ".concat((0, _global_styling.logicalCSS)('width', euiTheme.size.l), "\n        "),
+        s: "\n          ".concat((0, _global_styling.logicalCSS)('width', (0, _global_styling.mathWithUnits)(euiTheme.size.xs, function (x) {
+          return x + euiTheme.base;
+        })), "\n        ")
       }
     },
     euiBetaBadge__icon: _ref3,

package/lib/components/badge/notification_badge/badge_notification.styles.js

@@ -18,12 +18,13 @@ var _color_utils = require("../color_utils");
 var euiNotificationBadgeStyles = exports.euiNotificationBadgeStyles = function euiNotificationBadgeStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var badgeColors = (0, _color_utils.euiBadgeColors)(euiThemeContext);
-  var borderWidth = euiTheme.border.width.thin;
   return {
-    euiNotificationBadge: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " border-radius:", euiTheme.border.radius.small, ";border:", borderWidth, " solid transparent;overflow:hidden;cursor:default;font-size:", (0, _global_styling.euiFontSizeFromScale)('xs', euiTheme), ";font-weight:", euiTheme.font.weight.medium, ";", (0, _global_styling.euiNumberFormat)(euiThemeContext), " text-align:center;", _global_styling.euiCanAnimate, "{transition:all ", euiTheme.animation.fast, " ease-in;};label:euiNotificationBadge;"),
+    euiNotificationBadge: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-block;vertical-align:middle;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " border-radius:", euiTheme.border.radius.small, ";cursor:default;font-size:", (0, _global_styling.euiFontSizeFromScale)('xs', euiTheme), ";font-weight:", euiTheme.font.weight.medium, ";", (0, _global_styling.euiNumberFormat)(euiThemeContext), " text-align:center;", _global_styling.euiCanAnimate, "{transition:all ", euiTheme.animation.fast, " ease-in;};label:euiNotificationBadge;"),
     // Sizes
-    s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('min-width', euiTheme.size.base), ";;label:s;"),
-    m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _global_styling.mathWithUnits)(euiTheme.size.xs, function (x) {
+    s: /*#__PURE__*/(0, _react.css)("line-height:", euiTheme.size.base, ";", (0, _global_styling.logicalCSS)('height', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('min-width', euiTheme.size.base), ";;label:s;"),
+    m: /*#__PURE__*/(0, _react.css)("line-height:", (0, _global_styling.mathWithUnits)(euiTheme.size.xs, function (x) {
+      return x + euiTheme.base;
+    }), ";", (0, _global_styling.logicalCSS)('height', (0, _global_styling.mathWithUnits)(euiTheme.size.xs, function (x) {
       return x + euiTheme.base;
     })), " ", (0, _global_styling.logicalCSS)('min-width', euiTheme.size.l), ";;label:m;"),
     // Colors

package/lib/components/beacon/beacon.js

@@ -53,15 +53,7 @@ var EuiBeacon = exports.EuiBeacon = function EuiBeacon(_ref) {
     className: classes,
     css: cssStyles,
     style: beaconStyle
-  }, rest), (0, _react2.jsx)("svg", {
-    viewBox: "0 0 16 16",
-    role: "img",
-    "aria-hidden": "true"
-  }, (0, _react2.jsx)("circle", {
-    cx: "8",
-    cy: "8",
-    r: "8"
-  })));
+  }, rest));
 };
 EuiBeacon.propTypes = {
   className: _propTypes.default.string,

package/lib/components/beacon/beacon.styles.js

@@ -16,7 +16,7 @@ var _templateObject, _templateObject2;
  */
 function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
 var _colorCSS = function _colorCSS(color) {
-  return "\n    svg {\n      fill: ".concat(color, ";\n    }\n    &:before,\n    &:after {\n      box-shadow: 0 0 1px 1px ").concat(color, ";\n    }\n  ");
+  return "\n    background-color: ".concat(color, ";\n    &:before,\n    &:after {\n      box-shadow: 0 0 1px 1px ").concat(color, ";\n    }\n  ");
 };
 var euiBeaconPulseLarge = (0, _react.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% {\n    transform: scale(.1);\n    opacity: 1;\n  }\n\n  70% {\n    transform: scale(3);\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 0;\n  }\n"])));
 var euiBeaconPulseSmall = (0, _react.keyframes)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n   0% {\n    transform: scale(.1);\n    opacity: 1;\n  }\n\n  70% {\n    transform: scale(2);\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 0;\n  }\n"])));
@@ -24,7 +24,7 @@ var euiBeaconStyles = exports.euiBeaconStyles = function euiBeaconStyles(_ref) {
   var euiTheme = _ref.euiTheme;
   return {
     // Base
-    euiBeacon: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;justify-content:center;border-radius:50%;svg{", (0, _global_styling.logicalSizeCSS)('100%'), ";}&::before,&::after{position:absolute;content:'';", (0, _global_styling.logicalSizeCSS)('100%'), " ", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('top', 0), " background-color:transparent;border-radius:50%;}&::before{transform:scale(1.6);opacity:0.4;}&::after{opacity:0;}", _global_styling.euiCanAnimate, "{&::before{animation:", euiBeaconPulseLarge, " 2.5s infinite ease-out;}&::after{animation:", euiBeaconPulseSmall, " 2.5s infinite ease-out 0.25s;}};label:euiBeacon;"),
+    euiBeacon: /*#__PURE__*/(0, _react.css)("position:relative;border-radius:50%;&::before,&::after{position:absolute;content:'';", (0, _global_styling.logicalSizeCSS)('100%', '100%'), " ", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('top', 0), " background-color:transparent;border-radius:50%;}&::before{transform:scale(1.6);opacity:0.4;}&::after{opacity:0;}", _global_styling.euiCanAnimate, "{&::before{animation:", euiBeaconPulseLarge, " 2.5s infinite ease-out;}&::after{animation:", euiBeaconPulseSmall, " 2.5s infinite ease-out 0.25s;}};label:euiBeacon;"),
     subdued: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.subduedText), ";label:subdued;"),
     primary: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.primary), ";label:primary;"),
     success: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.success), ";label:success;"),

package/lib/components/bottom_bar/bottom_bar.styles.js

@@ -19,12 +19,11 @@ var _templateObject;
 function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
 var euiBottomBarAppear = (0, _react.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: translateY(100%);\n    opacity: 0;\n  }\n\n  100% {\n    transform: translateY(0%);\n    opacity: 1;\n  }\n"])));
 var euiBottomBarStyles = exports.euiBottomBarStyles = function euiBottomBarStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme,
-    highContrastMode = euiThemeContext.highContrastMode;
+  var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
     // `color` is inherited from the wrapping `EuiThemeProvider colorMode="dark"`
-    euiBottomBar: /*#__PURE__*/(0, _react.css)("background-color:", (0, _services.shade)(euiTheme.colors.lightestShade, 0.5), ";", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), " ", highContrastMode ? '' : (0, _mixins.euiShadowFlat)(euiThemeContext), " ", _global_styling.euiCanAnimate, "{animation:", euiBottomBarAppear, " ", euiTheme.animation.slow, " ", euiTheme.animation.resistance, ";};label:euiBottomBar;"),
+    euiBottomBar: /*#__PURE__*/(0, _react.css)((0, _mixins.euiShadowFlat)(euiThemeContext), " background:", (0, _services.shade)(euiTheme.colors.lightestShade, 0.5), ";", _global_styling.euiCanAnimate, "{animation:", euiBottomBarAppear, " ", euiTheme.animation.slow, " ", euiTheme.animation.resistance, ";};label:euiBottomBar;"),
     static: /*#__PURE__*/(0, _react.css)(";label:static;"),
     // Default
     fixed: /*#__PURE__*/(0, _react.css)("position:fixed;z-index:", Number(euiTheme.levels.header) - 2, ";;label:fixed;"),

package/lib/components/breadcrumbs/breadcrumb.styles.js

@@ -41,18 +41,7 @@ var euiBreadcrumbStyles = exports.euiBreadcrumbStyles = function euiBreadcrumbSt
     isTruncated: _ref2,
     isCollapsed: _ref,
     // Types
-    page: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){&::after{content:'';flex-shrink:0;", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('margin-bottom', 0), " ", (0, _global_styling.logicalCSS)('margin-horizontal', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('height', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('border-right', euiTheme.border.thin), " transform:translateY(-", euiTheme.border.width.thin, ") rotate(15deg);}};label:page;"),
-    application: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){", (0, _global_styling.logicalCSS)('margin-right', "-".concat(euiTheme.size.xs)), ";}", _applicationHighContrastBorders(euiThemeContext), ";;label:application;")
+    page: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){&::after{background:", euiTheme.colors.lightShade, ";content:'';flex-shrink:0;", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('margin-bottom', 0), " ", (0, _global_styling.logicalCSS)('margin-horizontal', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('height', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('width', '1px'), " transform:translateY(-1px) rotate(15deg);}};label:page;"),
+    application: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){", (0, _global_styling.logicalCSS)('margin-right', "-".concat(euiTheme.size.xs)), ";};label:application;")
   };
-};
-var _applicationHighContrastBorders = function _applicationHighContrastBorders(_ref3) {
-  var euiTheme = _ref3.euiTheme,
-    highContrastMode = _ref3.highContrastMode;
-  if (!highContrastMode) return '';
-  var borderWidth = euiTheme.border.width.thin;
-  var borderColor = euiTheme.border.color;
-
-  // Windows high contrast themes ignore background-color, which makes application
-  // breadcrumbs hard to distinguish - these border/filter workarounds restore visual affordance
-  return "\n    @media (forced-colors: active) {\n      .euiBreadcrumb__content {\n        border: ".concat(euiTheme.border.thin, ";\n      }\n\n      &:first-child:not(:only-child) {\n        filter: drop-shadow(").concat(borderWidth, " 0 0 ").concat(borderColor, ");\n      }\n      &:last-child:not(:only-child) {\n        filter: drop-shadow(-").concat(borderWidth, " 0 0 ").concat(borderColor, ");\n      }\n      &:not(:only-child, :first-child, :last-child) {\n        filter:\n          drop-shadow(").concat(borderWidth, " 0 0 ").concat(borderColor, ")\n          drop-shadow(-").concat(borderWidth, " 0  0 ").concat(borderColor, ");\n      }\n    }\n  ");
 };

package/lib/components/button/button_group/button_group.styles.js

@@ -26,23 +26,19 @@ var euiButtonGroupStyles = exports.euiButtonGroupStyles = {
   }
 };
 var euiButtonGroupButtonsStyles = exports.euiButtonGroupButtonsStyles = function euiButtonGroupButtonsStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme,
-    highContrastMode = euiThemeContext.highContrastMode;
+  var euiTheme = euiThemeContext.euiTheme;
   var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
     controlCompressedHeight = _euiFormVariables.controlCompressedHeight,
     controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius,
     backgroundColor = _euiFormVariables.backgroundColor,
     borderColor = _euiFormVariables.borderColor;
-  var _highContrastAffordance = highContrastMode ? "\n      & > .euiButtonGroupButton:not(:first-child),\n      & > .euiButtonGroup__tooltipWrapper:not(:first-child) .euiButtonGroupButton {\n        ".concat((0, _global_styling.logicalCSS)('border-left', 'none'), "\n      }\n\n      /* Target Windows high contrast themes, which ignore background-color\n       * and make selections difficult to distinguish */\n      @media (forced-colors: active) {\n        .euiButtonGroupButton-isSelected {\n          ").concat((0, _global_styling.logicalCSS)('border-bottom-width', (0, _global_styling.mathWithUnits)(euiTheme.border.width.thick, function (x) {
-    return x * 1.5;
-  })), "\n        }\n      }\n      ") : '';
   return {
     // Base
     euiButtonGroup__buttons: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', '100%'), " display:flex;;label:euiButtonGroup__buttons;"),
     fullWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), " .euiButtonGroupButton,.euiButtonGroup__tooltipWrapper{flex:1;", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:fullWidth;"),
     // Sizes
-    m: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";", _highContrastAffordance, ";;label:m;"),
-    s: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.small, ";", _highContrastAffordance, ";;label:s;"),
+    m: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";;label:m;"),
+    s: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.small, ";;label:s;"),
     compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', controlCompressedHeight), " background-color:", backgroundColor, ";border:", euiTheme.border.width.thin, " solid ", borderColor, ";border-radius:", controlCompressedBorderRadius, ";;label:compressed;")
   };
 };

package/lib/components/button/button_group/button_group_button.styles.js

@@ -46,8 +46,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var euiButtonGroupButtonStyles = exports.euiButtonGroupButtonStyles = function euiButtonGroupButtonStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme,
-    highContrastMode = euiThemeContext.highContrastMode;
+  var euiTheme = euiThemeContext.euiTheme;
   var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
     controlCompressedHeight = _euiFormVariables.controlCompressedHeight,
     controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius;
@@ -66,8 +65,8 @@ var euiButtonGroupButtonStyles = exports.euiButtonGroupButtonStyles = function e
       uncompressed: /*#__PURE__*/(0, _react.css)("&:is(.euiButtonGroupButton-isSelected){font-weight:", euiTheme.font.weight.bold, ";}&:focus-visible{", (0, _global_styling.euiOutline)(euiThemeContext, 'inset', euiTheme.colors.fullShade), ";};label:uncompressed;"),
       get borders() {
         var selectors = '.euiButtonGroupButton-isSelected, .euiButtonGroup__tooltipWrapper-isSelected';
-        var selectedColor = (0, _services.transparentize)(euiTheme.colors.emptyShade, highContrastMode ? 1 : 0.2);
-        var unselectedColor = (0, _services.transparentize)(euiTheme.colors.fullShade, highContrastMode ? 1 : 0.1);
+        var selectedColor = (0, _services.transparentize)(euiTheme.colors.emptyShade, 0.2);
+        var unselectedColor = (0, _services.transparentize)(euiTheme.colors.fullShade, 0.1);
         var borderWidth = euiTheme.border.width.thin;
 
         // "Borders" between buttons should be present between two of the same colored buttons,
@@ -86,10 +85,9 @@ var euiButtonGroupButtonStyles = exports.euiButtonGroupButtonStyles = function e
       return x * 2;
     }), ";background-clip:content-box;border-radius:", (0, _global_styling.mathWithUnits)([controlCompressedBorderRadius, euiTheme.border.width.thin], function (x, y) {
       return x + y;
-    }), ";font-weight:", euiTheme.font.weight.regular, ";&:is(.euiButtonGroupButton-isSelected){font-weight:", euiTheme.font.weight.semiBold, ";}", highContrastMode ? // Mac vs Windows high contrast modes - Mac shows background colors which is sufficient affordance, Windows does not and needs the default button border
-    "@media (forced-colors: none) {\n            border: none;\n          }" : '', ";;label:compressed;"),
+    }), ";font-weight:", euiTheme.font.weight.regular, ";&:is(.euiButtonGroupButton-isSelected){font-weight:", euiTheme.font.weight.semiBold, ";};label:compressed;"),
     // States
-    disabledAndSelected: /*#__PURE__*/(0, _react.css)("color:", (0, _services.makeDisabledContrastColor)(euiTheme.colors.disabledText)(euiTheme.colors.disabled), ";background-color:", euiTheme.colors.disabled, ";", highContrastMode ? "border: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.disabled, ";") : '', ";;label:disabledAndSelected;"),
+    disabledAndSelected: /*#__PURE__*/(0, _react.css)("color:", (0, _services.makeDisabledContrastColor)(euiTheme.colors.disabledText)(euiTheme.colors.disabled), ";background-color:", euiTheme.colors.disabled, ";;label:disabledAndSelected;"),
     // Tooltip anchor wrapper
     tooltipWrapper: _ref,
     // Content wrapper

package/lib/components/code/code_block.styles.js

@@ -44,11 +44,9 @@ var _ref5 = process.env.NODE_ENV === "production" ? {
 };
 var euiCodeBlockStyles = exports.euiCodeBlockStyles = function euiCodeBlockStyles(euiThemeContext) {
   var codeSyntaxVariables = (0, _code_syntax.euiCodeSyntaxVariables)(euiThemeContext);
-  var euiTheme = euiThemeContext.euiTheme,
-    highContrastMode = euiThemeContext.highContrastMode;
-  var highContrastBorder = "\n    /* EuiPanels always have a border in high contrast mode, no need to double up */\n    /* Border must be on the child <pre> to play nicely with EuiText's <pre> styles */\n    &:not(.euiPanel > *) .euiCodeBlock__pre {\n      border: ".concat(euiTheme.border.thin, ";\n    }");
+  var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiCodeBlock: /*#__PURE__*/(0, _react.css)("max-inline-size:100%;display:block;position:relative;background:", codeSyntaxVariables.backgroundColor, ";", highContrastMode ? highContrastBorder : '', " ", codeSyntaxVariables.tokensCss, ";;label:euiCodeBlock;"),
+    euiCodeBlock: /*#__PURE__*/(0, _react.css)("max-inline-size:100%;display:block;position:relative;background:", codeSyntaxVariables.backgroundColor, ";", codeSyntaxVariables.tokensCss, ";;label:euiCodeBlock;"),
     // Font size
     s: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";;label:s;"),
     m: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";;label:m;"),

package/lib/components/code/code_block_annotations.style.js

@@ -21,8 +21,6 @@ var euiCodeBlockAnnotationsStyles = exports.euiCodeBlockAnnotationsStyles = func
   });
   return {
     euiCodeBlockAnnotation: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('right', 0), " ", (0, _global_styling.logicalCSS)('top', '50%'), " transform:translate(50%, -50%);line-height:1;;label:euiCodeBlockAnnotation;"),
-    euiCodeBlockAnnotation__buttonIcon: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(buttonIconSize), " display:flex;align-items:center;justify-content:center;border:", (0, _global_styling.mathWithUnits)(buttonIconSize, function (x) {
-      return x / 2;
-    }), " solid ", euiTheme.colors.primary, ";border-radius:50%;;label:euiCodeBlockAnnotation__buttonIcon;")
+    euiCodeBlockAnnotation__buttonIcon: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(buttonIconSize), " display:flex;align-items:center;justify-content:center;background-color:", euiTheme.colors.primary, ";border-radius:50%;;label:euiCodeBlockAnnotation__buttonIcon;")
   };
 };

package/lib/components/code/code_block_line.styles.js

@@ -23,16 +23,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 // (i.e., applying styles in vanilla JS / directly to DOM nodes instead of React)
 
 var euiCodeBlockLineStyles = exports.euiCodeBlockLineStyles = function euiCodeBlockLineStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme,
-    highContrastMode = euiThemeContext.highContrastMode;
-  var lineMargins = euiTheme.size.m;
-  var lineWidth = euiTheme.border.width.thin;
-  var highlightWidth = highContrastMode ? (0, _global_styling.mathWithUnits)(euiTheme.border.width.thick, function (x) {
-    return x * 1.5;
-  }) : euiTheme.border.width.thick;
-  var highlightOffset = (0, _global_styling.mathWithUnits)([lineMargins, lineWidth, highlightWidth], function (x, y, z) {
-    return x + y - z;
-  });
+  var euiTheme = euiThemeContext.euiTheme;
   return {
     euiCodeBlock__line: /*#__PURE__*/(0, _css.css)(process.env.NODE_ENV === "production" ? {
       name: "yn676d-euiCodeBlock__line",
@@ -51,11 +42,11 @@ var euiCodeBlockLineStyles = exports.euiCodeBlockLineStyles = function euiCodeBl
       toString: _EMOTION_STRINGIFIED_CSS_ERROR__
     }),
     lineText: {
-      euiCodeBlock__lineText: /*#__PURE__*/(0, _css.css)("flex-grow:1;display:inline-block;padding-inline-start:", lineMargins, ";border-inline-start:", lineWidth, " solid ", euiTheme.border.color, ";user-select:text;;label:euiCodeBlock__lineText;"),
-      isHighlighted: /*#__PURE__*/(0, _css.css)("background:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'primary'), ";border-inline-start:", highlightWidth, " solid ", euiTheme.colors.primary, ";padding-inline-start:", highlightOffset, ";;label:isHighlighted;")
+      euiCodeBlock__lineText: /*#__PURE__*/(0, _css.css)("flex-grow:1;display:inline-block;padding-inline-start:", euiTheme.size.m, ";border-inline-start:", euiTheme.border.thin, ";user-select:text;;label:euiCodeBlock__lineText;"),
+      isHighlighted: /*#__PURE__*/(0, _css.css)("background:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'primary'), ";border-inline-start:", euiTheme.border.width.thick, " solid ", euiTheme.colors.primary, ";;label:isHighlighted;")
     },
     lineNumber: {
-      euiCodeBlock__lineNumberWrapper: /*#__PURE__*/(0, _css.css)("position:relative;flex-grow:0;flex-shrink:0;user-select:none;padding-inline-end:", lineMargins, ";box-sizing:content-box;;label:euiCodeBlock__lineNumberWrapper;"),
+      euiCodeBlock__lineNumberWrapper: /*#__PURE__*/(0, _css.css)("position:relative;flex-grow:0;flex-shrink:0;user-select:none;padding-inline-end:", euiTheme.size.m, ";box-sizing:content-box;;label:euiCodeBlock__lineNumberWrapper;"),
       euiCodeBlock__lineNumber: /*#__PURE__*/(0, _css.css)("color:", euiTheme.colors.subduedText, ";text-align:end;display:block;&::before{content:attr(data-line-number);};label:euiCodeBlock__lineNumber;")
     }
   };

package/lib/components/code/code_syntax.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiCodeTextColors = exports.euiCodeSyntaxVariables = void 0;
+exports.euiCodeSyntaxVariables = void 0;
 var _services = require("../../services");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -14,23 +14,14 @@ var _services = require("../../services");
  */
 
 var visColors = (0, _services.euiPaletteColorBlind)();
-var euiCodeTextColors = exports.euiCodeTextColors = function euiCodeTextColors(_ref) {
-  var euiTheme = _ref.euiTheme;
-  return {
-    backgroundColor: euiTheme.colors.lightestShade,
-    color: euiTheme.colors.text
-  };
-};
 
 // These variables are computationally expensive - do not call them outside `useEuiMemoizedStyles`
-var euiCodeSyntaxVariables = exports.euiCodeSyntaxVariables = function euiCodeSyntaxVariables(euiThemeContext) {
-  var _euiCodeTextColors = euiCodeTextColors(euiThemeContext),
-    backgroundColor = _euiCodeTextColors.backgroundColor,
-    color = _euiCodeTextColors.color;
-  var euiTheme = euiThemeContext.euiTheme;
+var euiCodeSyntaxVariables = exports.euiCodeSyntaxVariables = function euiCodeSyntaxVariables(_ref) {
+  var euiTheme = _ref.euiTheme;
+  var backgroundColor = euiTheme.colors.lightestShade;
   return {
     backgroundColor: backgroundColor,
-    color: color,
+    color: (0, _services.makeHighContrastColor)(euiTheme.colors.text)(backgroundColor),
     inlineCodeColor: (0, _services.makeHighContrastColor)(visColors[3])(backgroundColor),
     selectedBackgroundColor: 'inherit',
     commentColor: (0, _services.makeHighContrastColor)(euiTheme.colors.subduedText)(backgroundColor),

package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.js

@@ -67,6 +67,7 @@ var EuiCollapsedNavPopover = exports.EuiCollapsedNavPopover = function EuiCollap
     display: "block",
     anchorPosition: "rightUp",
     panelPaddingSize: "none",
+    repositionOnScroll: true,
     button: (0, _react2.jsx)(_collapsed_nav_button.EuiCollapsedNavButton, {
       title: title,
       icon: icon || 'boxesHorizontal',

package/lib/components/color_picker/color_palette_display/color_palette_display.styles.js

@@ -16,10 +16,10 @@ var _global_styling = require("../../../global_styling");
  */
 
 var euiColorPaletteDisplayStyles = exports.euiColorPaletteDisplayStyles = function euiColorPaletteDisplayStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme,
-    highContrastMode = euiThemeContext.highContrastMode;
-  var border = highContrastMode ? euiTheme.border.thin : // Border is a pseudo element with transparency
-  "".concat(euiTheme.border.width.thin, " solid ").concat((0, _services.transparentize)(euiTheme.colors.darkestShade, 0.2));
+  var euiTheme = euiThemeContext.euiTheme;
+
+  // Border is a pseudo element with transparency
+  var border = "".concat(euiTheme.border.width.thin, " solid ").concat((0, _services.transparentize)(euiTheme.colors.darkestShade, 0.2));
   return {
     euiColorPaletteDisplay: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;flex-direction:row;overflow:hidden;&::after{content:'';position:absolute;inset:0;pointer-events:none;border:", border, ";border-radius:inherit;};label:euiColorPaletteDisplay;"),
     // Sizes

package/lib/components/color_picker/color_palette_display/color_palette_display_fixed.js

@@ -1,11 +1,10 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiColorPaletteDisplayFixed = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../utils");
 var _accessibility = require("../../accessibility");
@@ -20,32 +19,22 @@ var _excluded = ["palette", "title"];
  * Side Public License, v 1.
  */
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
 var EuiColorPaletteDisplayFixed = exports.EuiColorPaletteDisplayFixed = function EuiColorPaletteDisplayFixed(_ref) {
   var palette = _ref.palette,
     title = _ref.title,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var paletteStops = (0, _react.useMemo)(function () {
-    var fixedGradient = (0, _utils.getFixedLinearGradient)(palette);
-    return fixedGradient.map(function (item, index) {
-      return (
-        // We use <svg> elements to support Windows high contrast themes,
-        // which ignore all backgrounds except for those set on svgs
-        (0, _react2.jsx)("svg", {
-          style: {
-            backgroundColor: item.color,
-            width: item.width
-          },
-          key: "".concat(item.color, "-").concat(index),
-          role: "img",
-          "aria-hidden": true
-        })
-      );
+  var fixedGradient = (0, _utils.getFixedLinearGradient)(palette);
+  var paletteStops = fixedGradient.map(function (item, index) {
+    return (0, _react2.jsx)("span", {
+      style: {
+        backgroundColor: item.color,
+        width: item.width
+      },
+      key: "".concat(item.color, "-").concat(index)
     });
-  }, [palette]);
+  });
   return (0, _react2.jsx)("span", rest, title && (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, title)), (0, _react2.jsx)("span", {
     // aria-hidden="true" is to ensure color blocks are ignored by screen readers,
     // and the only accessible text for options is the EuiScreenReaderOnly {title}

package/lib/components/color_picker/color_palette_display/color_palette_display_gradient.js

@@ -1,5 +1,6 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../utils");
 var _accessibility = require("../../accessibility");
 var _react2 = require("@emotion/react");
-var _excluded = ["palette", "title"];
+var _excluded = ["palette", "title", "style"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -19,25 +20,28 @@ var _excluded = ["palette", "title"];
  */
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
 var EuiColorPaletteDisplayGradient = exports.EuiColorPaletteDisplayGradient = function EuiColorPaletteDisplayGradient(_ref) {
   var palette = _ref.palette,
     title = _ref.title,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
     rest = _objectWithoutProperties(_ref, _excluded);
   var gradient = (0, _utils.getLinearGradient)(palette);
-  return (0, _react2.jsx)("span", _extends({
-    className: "euiColorPaletteDisplayGradient"
-  }, rest), title && (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, title)), (0, _react2.jsx)("svg", {
+  return (0, _react2.jsx)(_react.default.Fragment, null, title && (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, title)), (0, _react2.jsx)("span", _extends({
     // aria-hidden="true" is to ensure color blocks are ignored by screen readers,
     // and the only accessible text for options is the EuiScreenReaderOnly {title}
     "aria-hidden": "true",
-    role: "img",
-    className: "eui-fullWidth",
-    style: {
+    style: _objectSpread(_objectSpread({}, style), {}, {
       background: gradient
-    }
-  }));
+    })
+  }, rest)));
 };
 EuiColorPaletteDisplayGradient.propTypes = {
   className: _propTypes.default.string,

package/lib/components/color_picker/color_picker.js

@@ -319,7 +319,6 @@ var EuiColorPicker = exports.EuiColorPicker = function EuiColorPicker(_ref) {
   };
   var showSecondaryInput = mode === 'secondaryInput' || secondaryInputDisplay !== 'none';
   var inlineInput = showSecondaryInput && (0, _react2.jsx)(_form.EuiFormRow, {
-    display: "rowCompressed",
     isInvalid: isInvalid,
     error: isInvalid ? colorErrorMessage : null
   }, (0, _react2.jsx)(_form.EuiFormControlLayout, {

package/lib/components/color_picker/color_picker_swatch.js

@@ -10,11 +10,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
 var _i18n = require("../i18n");
-var _icon = require("../icon");
 var _utils = require("./utils");
 var _color_picker_swatch = require("./color_picker_swatch.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "color"];
+var _excluded = ["className", "color", "style"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -26,11 +25,17 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 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); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
 var EuiColorPickerSwatch = exports.EuiColorPickerSwatch = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var className = _ref.className,
     color = _ref.color,
+    style = _ref.style,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = (0, _classnames.default)('euiColorPickerSwatch', className);
   var styles = (0, _services.useEuiMemoizedStyles)(_color_picker_swatch.euiColorPickerSwatchStyles);
@@ -48,12 +53,11 @@ var EuiColorPickerSwatch = exports.EuiColorPickerSwatch = /*#__PURE__*/(0, _reac
     css: styles.euiColorPickerSwatch,
     className: classes,
     "aria-label": ariaLabel,
-    ref: ref
-  }, rest), (0, _react2.jsx)(_icon.EuiIcon, {
-    type: "stopFilled",
-    color: background,
-    size: "xl"
-  }));
+    ref: ref,
+    style: _objectSpread({
+      background: background
+    }, style)
+  }, rest));
 });
 EuiColorPickerSwatch.propTypes = {
   className: _propTypes.default.string,

package/lib/components/color_picker/color_picker_swatch.styles.js

@@ -16,11 +16,10 @@ var _global_styling = require("../../global_styling");
  */
 
 var euiColorPickerSwatchStyles = exports.euiColorPickerSwatchStyles = function euiColorPickerSwatchStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme,
-    highContrastMode = euiThemeContext.highContrastMode;
+  var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiColorPickerSwatch: /*#__PURE__*/(0, _react.css)("display:flex;justify-content:center;align-items:center;", (0, _global_styling.logicalSizeCSS)(euiTheme.size.l), " overflow:hidden;border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.medium, function (x) {
+    euiColorPickerSwatch: /*#__PURE__*/(0, _react.css)("display:inline-block;", (0, _global_styling.logicalSizeCSS)(euiTheme.size.l), " border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.medium, function (x) {
       return x / 2;
-    }), ";", highContrastMode ? "border: ".concat(euiTheme.border.thin, ";") : "\n          border: ".concat(euiTheme.border.width.thin, " solid\n            ").concat((0, _services.transparentize)(euiTheme.colors.fullShade, 0.1), ";\n          box-shadow: inset 0 0 0 ").concat(euiTheme.border.width.thin, "\n            ").concat((0, _services.transparentize)(euiTheme.colors.emptyShade, 0.05), ";\n        "), " cursor:pointer;&:disabled{cursor:default;}&:focus{", (0, _global_styling.euiOutline)(euiThemeContext, 'center'), ";}svg{pointer-events:none;};label:euiColorPickerSwatch;")
+    }), ";border:", euiTheme.border.width.thin, " solid ", (0, _services.transparentize)(euiTheme.colors.fullShade, 0.1), ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", (0, _services.transparentize)(euiTheme.colors.emptyShade, 0.05), ";cursor:pointer;&:disabled{cursor:default;}&:focus{", (0, _global_styling.euiOutline)(euiThemeContext, 'center'), ";};label:euiColorPickerSwatch;")
   };
 };

package/lib/components/color_picker/hue.js

@@ -48,12 +48,7 @@ var EuiHue = exports.EuiHue = function EuiHue(_ref) {
     default: "Select the HSV color mode 'hue' value"
   }))), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
     "aria-live": "polite"
-  }, hex)), (0, _react2.jsx)("svg", {
-    css: styles.euiHue__track,
-    className: "euiHue__track",
-    role: "img",
-    "aria-hidden": true
-  }), (0, _react2.jsx)("input", _extends({
+  }, hex)), (0, _react2.jsx)("input", _extends({
     id: "".concat(id, "-hue"),
     min: 0,
     max: HUE_RANGE,

package/lib/components/color_picker/hue.styles.js

@@ -17,8 +17,7 @@ var _range = require("../form/range/range.styles");
  */
 
 var euiHueStyles = exports.euiHueStyles = function euiHueStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme,
-    highContrastMode = euiThemeContext.highContrastMode;
+  var euiTheme = euiThemeContext.euiTheme;
   var height = euiTheme.size.m;
   var thumbSize = euiTheme.size.l;
   var thumbBorder = (0, _global_styling.mathWithUnits)(euiTheme.border.width.thick, function (x) {
@@ -26,12 +25,11 @@ var euiHueStyles = exports.euiHueStyles = function euiHueStyles(euiThemeContext)
   });
   var thumbBoxShadow = "\n    0 2px 2px -1px ".concat((0, _services.transparentize)(euiTheme.colors.shadow, 0.2), ",\n    0 1px 5px -2px ").concat((0, _services.transparentize)(euiTheme.colors.shadow, 0.2));
   return {
-    euiHue: /*#__PURE__*/(0, _react.css)("position:relative;", (0, _global_styling.logicalCSS)('height', height), ";;label:euiHue;"),
     // This wraps the range and sets a rainbow gradient,
     // which allows the range thumb to be larger than the visible track
-    euiHue__track: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('height', height), " border-radius:", height, ";", highContrastMode ? "border: ".concat(euiTheme.border.thin, ";") : '', " background:linear-gradient(\n        to right,\n        #ff3232 0%,\n        #fff130 20%,\n        #45ff30 35%,\n        #28fff0 52%,\n        #282cff 71%,\n        #ff28fb 88%,\n        #ff0094 100%\n      );;label:euiHue__track;"),
-    euiHue__range: /*#__PURE__*/(0, _react.css)("position:relative;", (0, _global_styling.logicalCSS)('height', thumbSize), (0, _global_styling.logicalCSS)('width', "calc(100% + 2px)"), (0, _global_styling.logicalCSS)('margin-horizontal', '-1px'), " ", (0, _global_styling.logicalCSS)('margin-top', (0, _global_styling.mathWithUnits)(height, function (x) {
+    euiHue: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', height), " border-radius:", height, ";background:linear-gradient(\n        to right,\n        #ff3232 0%,\n        #fff130 20%,\n        #45ff30 35%,\n        #28fff0 52%,\n        #282cff 71%,\n        #ff28fb 88%,\n        #ff0094 100%\n      );;label:euiHue;"),
+    euiHue__range: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', thumbSize), (0, _global_styling.logicalCSS)('width', "calc(100% + 2px)"), (0, _global_styling.logicalCSS)('margin-horizontal', '-1px'), " ", (0, _global_styling.logicalCSS)('margin-top', (0, _global_styling.mathWithUnits)(height, function (x) {
       return x / -2;
-    })), "appearance:none;background:transparent;&::-webkit-slider-thumb{-webkit-appearance:none;}", (0, _range.euiRangeThumbPerBrowser)("\n        ".concat((0, _range.euiRangeThumbStyle)(euiThemeContext), "\n        border-width: ").concat(thumbBorder, ";\n        border-radius: 100%;\n        ").concat(highContrastMode ? "border: ".concat(thumbBorder, " solid ").concat(euiTheme.colors.ink, ";") : "box-shadow: ".concat(thumbBoxShadow, ";"), "\n        background-color: ").concat(highContrastMode ? euiTheme.colors.ghost : 'inherit', ";\n      ")), "&:focus{outline:none;}&:focus-visible{", (0, _range.euiRangeThumbPerBrowser)("\n          outline: ".concat(euiTheme.border.width.thick, " solid ").concat(euiTheme.colors.fullShade, ";\n          outline-offset: 0;\n        ")), ";};label:euiHue__range;")
+    })), "appearance:none;background:transparent;&::-webkit-slider-thumb{-webkit-appearance:none;}", (0, _range.euiRangeThumbPerBrowser)([(0, _range.euiRangeThumbStyle)(euiThemeContext), 'background-color: inherit', "border-width: ".concat(thumbBorder), 'border-radius: 100%', "box-shadow: ".concat(thumbBoxShadow)].join(';\n')), "&:focus{outline:none;}&:focus-visible{", (0, _range.euiRangeThumbPerBrowser)((0, _range.euiRangeThumbFocusBoxShadow)(euiThemeContext)), ";};label:euiHue__range;")
   };
 };